js使用xml數據載體實現城市省份二級聯動效果

更新時間：2021年08月24日 16:30:56 作者：evan_qb

這篇文章主要為大家詳細介紹了js使用xml數據載體實現城市省份二級聯動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了使用xml數據載體實現城市省份二級聯動的具體代碼，供大家參考，具體內容如下

首先寫好前臺頁面testProvince.jsp，將請求通過open、send發(fā)送到服務器

<%@ 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>二級聯動</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對象 
  function createAjax(){ 
   var ajax = null; 
   try{ 
    ajax = new ActiveXObject("microsoft.xmlhttp"); 
   }catch(e){ 
    try{ 
     ajax = new XMLHttpRequest(); 
    }catch(e1){ 
     alert("請更換瀏覽器"); 
    } 
   } 
   return ajax; 
  } 
 </script> 
 
 <script type="text/javascript"> 
  document.getElementById("provinceID").onchange = function(){ 
   //清空城市除了第一項 
   var cityElem = document.getElementById("cityID"); 
   cityElem.options.length = 1; 
    
   //獲取選中的省份 
   var province = this.value; 
   //進行編碼處理 
   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; 
    //準備發(fā)送異步請求 
    ajax.open(method, url); 
    //由于是get請求，所以不需要設置請求頭 
    //發(fā)送請求 
    ajax.send(null); 
     
    //監(jiān)聽服務器響應狀態(tài)的變化 
    ajax.onreadystatechange = function(){ 
     //響應狀態(tài)為4 表示ajax已經完全接受到服務器的數據了 
     if(ajax.readyState == 4){ 
      //接收到的數據正常 
      if(ajax.status == 200){ 
       //獲取服務器傳來的html數據 
       var xmlDocument = ajax.responseXML; 
       //進行dom操作解析xml 
       //解析xml數據 
       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>

然后在后臺ProvinceServlet中通過GET方式獲取請求，將返回的數據以O（輸出）流的方式發(fā)送出去,上面代碼的ajax.responseXML獲取輸出的數據，并進行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"); 
  //設置格式為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>長沙</city>"); 
   pw.write("<city>株洲</city>"); 
   pw.write("<city>湘潭</city>"); 
   pw.write("<city>岳陽</city>"); 
  }else if("廣東".equals(province)){ 
   pw.write("<city>廣州</city>"); 
   pw.write("<city>深圳</city>"); 
   pw.write("<city>中山</city>"); 
  } 
  pw.write("</citys>"); 
  pw.flush(); 
  pw.close(); 
 } 
}

運行結果如下: