省市县三级联动示例-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

u ajax的省市联动案例(如何动态的从服务器取得数据)

前端代码：

<script type="text/javascript">
 var cityXmlHttpRequest;
 var countyXmlHttpRequest;
 function selectProvince(){
  if(window.ActiveXObject){
   cityXmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }else{
   cityXmlHttpRequest = new  cityXmlHttpRequest();
  }
  
  if(cityXmlHttpRequest){
   //var url = "/AajxTest/"
   var province = document.getElementById("shen").value;
   var url = encodeURI("/AajxTest/Cities.do?method=getCities&province="+province);
   url = encodeURI(url);
   cityXmlHttpRequest.open("GET",url,true);
   cityXmlHttpRequest.onreadystatechange = function(){
   //返回的结果
   //成功返回
  if(cityXmlHttpRequest.readyState==4){
   
   if(cityXmlHttpRequest.status==200){

     
    //取出结果
    var cities=cityXmlHttpRequest.responseXML.getElementsByTagName("city");
    
    //把返回的城市动态添加到city控件 
    var mycity=document.getElementById("city");
    //清空一下select
    mycity.options.length=0;
    var mycounty=document.getElementById("county");
    //清空一下select
    mycounty.options.length=0;
    mycity.options[0]=new Option("--市--","--市--");
    mycounty.options.length=0;
    mycounty.options[0]=new Option("--县--","--县--");
    for(var i=0;i<cities.length;i++){
     mycity.options[i+1]=new Option(cities[i].firstChild.data,cities[i].firstChild.data);
    }
   }
   
  }
   }
   cityXmlHttpRequest.send();
  }
 }
 
 
 function selectCounty(){
  
  if(window.ActiveXObject){
   countyXmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }else{
   countyXmlHttpRequest = new  countyXmlHttpRequest();
  }
  
  if(countyXmlHttpRequest){
   var city = document.getElementById("city").value;
   var url = encodeURI("/AajxTest/Cities.do?method=getcounties&city="+city);
   url = encodeURI(url);
   countyXmlHttpRequest.open("GET",url,true);
   countyXmlHttpRequest.onreadystatechange = function(){
   //返回的结果
   //成功返回
  if(countyXmlHttpRequest.readyState==4){
   
   if(countyXmlHttpRequest.status==200){

     
    //取出结果
    var county=countyXmlHttpRequest.responseXML.getElementsByTagName("county");
    
    var mycounty=document.getElementById("county");
    //清空一下select
    mycounty.options.length=0;
    mycounty.options[0]=new Option("--县--","--县--");
    for(var i=0;i<county.length;i++){
     mycounty.options[i+1]=new Option(county[i].firstChild.data,county[i].firstChild.data);
    }
   }
   
  }
   }
   countyXmlHttpRequest.send();
  }
 }
 
 
 </script>
  </head>
  
  <body>
   <select id="shen" onchange="selectProvince();">
    <option>--省--</option>
    <option  value="福建">福建</option>
    <option  value="浙江">浙江</option>
   </select>
   
   <select id="city" onchange="selectCounty();">
    <option>--市--</option>
   <option  value="福建">福建</option>
    <option  value="浙江">浙江</option>
   </select>
   
    <select id="county">
    <option >--县--</option>
   <option  value="福建">福建</option>
    <option value="浙江">浙江</option>
   </select>
  </body>
</html>

Action代码：

public ActionForward getCities(ActionMapping arg0, ActionForm arg1,
  HttpServletRequest arg2, HttpServletResponse arg3) throws Exception {
 arg3.setContentType("text/xml;charset=UTF-8");
 arg2.setCharacterEncoding("UTF-8");
 PrintWriter out = arg3.getWriter();
 String province = arg2.getParameter("province");
 province = java.net.URLDecoder.decode(province, "UTF-8");
 System.out.println("Cities.getCities()");
 System.out.println(province);
 if(province != null &&( province =="福建" || province.equals("福建"))){
  out.append("<cities>");
  out.append("<city>福州</city><city>厦门</city>");
  out.append("</cities>");
 }else{
  out.append("<cities>");
  out.append("<city>宁波</city><city>温州</city>");
  out.append("</cities>");
 }
 out.close();
 return null;
}

public ActionForward getcounties(ActionMapping arg0, ActionForm arg1,
  HttpServletRequest arg2, HttpServletResponse arg3) throws Exception {
 System.out.println("Cities.getcounties()");
 arg3.setContentType("text/xml;charset=UTF-8");
 arg2.setCharacterEncoding("UTF-8");
 PrintWriter out = arg3.getWriter();
 String city = arg2.getParameter("city");
 city = java.net.URLDecoder.decode(city, "UTF-8");
 System.out.println("Cities.getcounties()");
 System.out.println(city);
 if(city != null &&( city =="福州" || city.equals("福州"))){
  out.append("<cities>");
  out.append("<county>仓山区</county><county>马尾区</county>");
  out.append("</cities>");
 }else{
  out.append("<cities>");
  out.append("<county>湖里区</county><county>集美区</county>");
  out.append("</cities>");
 }
 out.close();
 return null;
}

转载于:https://my.oschina.net/u/2009964/blog/407997