您的當(dāng)前位置：首頁(yè)js使用xml數(shù)據(jù)載體實(shí)現(xiàn)城市省份二級(jí)聯(lián)動(dòng)效果

js使用xml數(shù)據(jù)載體實(shí)現(xiàn)城市省份二級(jí)聯(lián)動(dòng)效果

來(lái)源：九壹網(wǎng)

本文實(shí)例為大家分享了使用xml數(shù)據(jù)載體實(shí)現(xiàn)城市省份二級(jí)聯(lián)動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

首先寫(xiě)好前臺(tái)頁(yè)面testProvince.jsp，將請(qǐng)求通過(guò)open、send發(fā)送到服務(wù)器

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
 <head> 
 <base href="<%=basePath%>" rel="external nofollow" > 
 <title>二級(jí)聯(lián)動(dòng)</title> 
 <meta http-equiv="pragma" content="no-cache"> 
 <meta http-equiv="cache-control" content="no-cache"> 
 <meta http-equiv="expires" content="0"> 
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
 <meta http-equiv="description" content="This is my page"> 
 <style type="text/css"> 
 select{ 
 width:111px; 
 } 
 </style> 
 </head> 
 
 <body> 
 <select id="provinceID"> 
 <option>選擇省份</option> 
 <option>湖南</option> 
 <option>廣東</option> 
 </select> 
 
 <select id="cityID"> 
 <option>選擇城市</option> 
 </select> 
 </body> 
 <script type="text/javascript"> 
 //創(chuàng)建ajax對(duì)象 
 function createAjax(){ 
 var ajax = null; 
 try{ 
 ajax = new ActiveXObject("microsoft.xmlhttp"); 
 }catch(e){ 
 try{ 
 ajax = new XMLHttpRequest(); 
 }catch(e1){ 
 alert("請(qǐng)更換瀏覽器"); 
 } 
 } 
 return ajax; 
 } 
 </script> 
 
 <script type="text/javascript"> 
 document.getElementById("provinceID").onchange = function(){ 
 //清空城市除了第一項(xiàng) 
 var cityElem = document.getElementById("cityID"); 
 cityElem.options.length = 1; 
 
 //獲取選中的省份 
 var province = this.value; 
 //進(jìn)行編碼處理 
 province = encodeURI(province); 
 if("選擇省份" != province){ 
 var ajax = createAjax(); 
 //提交方式為GET 
 var method = "GET"; 
 //提交路徑為servlet路徑 
 var url = "${pageContext.request.contextPath}/ProvinceServlet?time=" + new Date().getTime()+ 
 "&province=" +province; 
 //準(zhǔn)備發(fā)送異步請(qǐng)求 
 ajax.open(method, url); 
 //由于是get請(qǐng)求，所以不需要設(shè)置請(qǐng)求頭 
 //發(fā)送請(qǐng)求 
 ajax.send(null); 
 
 //監(jiān)聽(tīng)服務(wù)器響應(yīng)狀態(tài)的變化 
 ajax.onreadystatechange = function(){ 
 //響應(yīng)狀態(tài)為4 表示ajax已經(jīng)完全接受到服務(wù)器的數(shù)據(jù)了 
 if(ajax.readyState == 4){ 
 //接收到的數(shù)據(jù)正常 
 if(ajax.status == 200){ 
 //獲取服務(wù)器傳來(lái)的html數(shù)據(jù) 
 var xmlDocument = ajax.responseXML; 
 //進(jìn)行dom操作解析xml 
 //解析xml數(shù)據(jù) 
 var citys = xmlDocument.getElementsByTagName("city"); 
 for(var i = 0; i< citys.length;i++){ 
 //獲取xml中的值 :不能用innerHTML,要用nodeValue 
 var city = citys[i].firstChild.nodeValue; 
 //創(chuàng)建option 
 var optElement = document.createElement("option"); 
 optElement.innerHTML = city; 
 //獲取city 
 var cityElems = document.getElementById("cityID"); 
 cityElems.appendChild(optElement); 
 } 
 
 } 
 } 
 } 
 } 
 
 } 
 
 
 </script> 
</html>

然后在后臺(tái)ProvinceServlet中通過(guò)GET方式獲取請(qǐng)求，將返回的數(shù)據(jù)以O(shè)（輸出）流的方式發(fā)送出去,上面代碼的ajax.responseXML獲取輸出的數(shù)據(jù)，并進(jìn)行dom操作

public class ProvinceServlet extends HttpServlet { 
 @Override 
 protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
 throws ServletException, IOException { 
 req.setCharacterEncoding("utf-8"); 
 resp.setCharacterEncoding("utf-8"); 
 String province = req.getParameter("province"); 
 //重新編碼 
 province = new String(province.getBytes("ISO-8859-1"),"utf-8"); 
 //設(shè)置格式為xml 
 resp.setContentType("text/xml;charset=utf-8"); 
 //獲取字符

輸出流 PrintWriter pw = resp.getWriter(); //拼接xml頭 pw.write("<?xml version='1.0' encoding='UTF-8'?>"); pw.write("<citys>"); if ("湖南".equals(province)) { pw.write("<city>長(zhǎng)沙</city>"); pw.write("<city>株洲</city>"); pw.write("<city>湘潭</city>"); pw.write("<city>岳陽(yáng)</city>"); }else if("廣東".equals(province)){ pw.write("<city>廣州</city>"); pw.write("<city>深圳</city>"); pw.write("<city>中山</city>"); } pw.write("</citys>"); pw.flush(); pw.close(); } }

運(yùn)行結(jié)果如下:

成熟丰满熟妇高潮XXXXX,人妻无码AV中文系列久久兔费 ,国产精品一国产精品,国精品午夜福利视频不卡麻豆

js使用xml數(shù)據(jù)載體實(shí)現(xiàn)城市省份二級(jí)聯(lián)動(dòng)效果