Ajax技術2

時間 2019-11-26

標籤 ajax 技術欄目 Ajax 简体版

原文原文鏈接

u ajax的省市聯動案例(如何動態的從服務器取得數據)javascript

前端代碼：html

<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;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。