基于ajax二级联动

最新推荐文章于 2024-12-08 07:25:43 发布

程序员阿卢

最新推荐文章于 2024-12-08 07:25:43 发布

阅读量813

点赞数

分类专栏：学习文章标签： web开发网页设计 jsp javascript ajax

本文链接：https://blog.youkuaiyun.com/ljq54/article/details/22818131

版权

学习专栏收录该内容

37 篇文章

订阅专栏

<body>
     <select id="provinceID">
     <option> 选择省份</option>
     <option> 广东</option>
     <option> 湖南</option>
     <option> 江苏</option>

     </select>
     <hr/>

     <select id="cityID" style="width: 90px">
     <option> 选择城市</option>

     </select>
     <script type="text/javascript">
     document.getElementById("provinceID").οnchange=function(){
     var citySelectElement=document.getElementById("cityID");
     var size=citySelectElement.options.length;
     if(size>1){
     for(var i=size-1;i>0;i--)
        {
         citySelectElement.removeChild(citySelectElement.options[i]);
         }

     }

     var optionElement=this[this.selectedIndex];
     var province=optionElement.firstChild.nodeValue;

     //创建引擎
     var xhr=createAJAX();
     var method="POST";
     var url="${pageContext.request.contextPath}/ProvinceCityXMLServlet?time="+new Date().getTime();
     xhr.open(method,url);
     xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
     var content="province="+province;

     xhr.send(content);
     xhr.onreadystatechange=function(){
     if(xhr.readyState==4){
     if(xhr.status==200){
     var xmlDocument=xhr.responseXML;

     //解析xml文档
     var cityElementArray=xmlDocument.getElementsByTagName("city");
     var size=cityElementArray.length;
     for(var i=0;i<size;i++){
       var cityElement=cityElementArray[i];
       var city=cityElement.firstChild.nodeValue;

        var optionElement=document.createElement("option");

         optionElement.innerHTML=city;

         var citySelectElement=document.getElementById("cityID");
           citySelectElement.appendChild(optionElement);

        }
     }
     }
}
}



     function createAJAX(){
   var xhr = null;
   try{
    xhr = new ActiveXObject("microsoft.xmlhttp");
   }catch(e1){
    try{
     xhr = new XMLHttpRequest();
    }catch(e2){
    // alert("更换浏览器");
    }
   }
   return xhr;
  }

     </script>
</body>

servlet部分：

request.setCharacterEncoding("utf-8");
  String province=request.getParameter("province");
  response.setContentType("text/xml;charset=utf-8");
  PrintWriter pw=response.getWriter();
  pw.write("<root>");
  if("广东".equals(province)){
   pw.write("<city>广州</city>");
   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("<city>长沙</city>");
  }
  else if("江苏".equals(province)){
   pw.write("<city>南京</city>");
   pw.write("<city>苏州</city>");
   pw.write("<city>无锡</city>");
   pw.write("<city>海门</city>");
  }
  pw.write("</root>");
}