基于ajax二级联动

前端之家收集整理的这篇文章主要介绍了基于ajax二级联动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<body>@H_301_1@ <select id="provinceID">@H_301_1@ <option> 选择省份</option>@H_301_1@ <option> 广东</option>@H_301_1@ <option> 湖南</option>@H_301_1@ <option> 江苏</option>@H_301_1@ @H_301_1@ </select>@H_301_1@ <hr/>@H_301_1@ @H_301_1@ <select id="cityID" style="width: 90px">@H_301_1@ <option> 选择城市</option>@H_301_1@ @H_301_1@ </select>@H_301_1@ <script type="text/javascript">@H_301_1@ document.getElementById("provinceID").onchange=function(){@H_301_1@ var citySelectElement=document.getElementById("cityID");@H_301_1@ var size=citySelectElement.options.length;@H_301_1@ if(size>1){@H_301_1@ for(var i=size-1;i>0;i--)@H_301_1@ {@H_301_1@ citySelectElement.removeChild(citySelectElement.options[i]);@H_301_1@ }@H_301_1@ @H_301_1@ }@H_301_1@ @H_301_1@ var optionElement=this[this.selectedIndex];@H_301_1@ var province=optionElement.firstChild.nodeValue;@H_301_1@ @H_301_1@ //创建引擎@H_301_1@ var xhr=createAJAX();@H_301_1@ var method="POST";@H_301_1@ var url="${pageContext.request.contextPath}/ProvinceCityXMLServlet?time="+new Date().getTime();@H_301_1@ xhr.open(method,url);@H_301_1@ xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");@H_301_1@ var content="province="+province;@H_301_1@ @H_301_1@ xhr.send(content);@H_301_1@ xhr.onreadystatechange=function(){@H_301_1@ if(xhr.readyState==4){@H_301_1@ if(xhr.status==200){@H_301_1@ var xmlDocument=xhr.responseXML;@H_301_1@ @H_301_1@ //解析xml文档@H_301_1@ var cityElementArray=xmlDocument.getElementsByTagName("city");@H_301_1@ var size=cityElementArray.length;@H_301_1@ for(var i=0;i<size;i++){@H_301_1@ var cityElement=cityElementArray[i];@H_301_1@ var city=cityElement.firstChild.nodeValue;@H_301_1@ @H_301_1@ var optionElement=document.createElement("option");@H_301_1@ @H_301_1@ optionElement.innerHTML=city;@H_301_1@ @H_301_1@ var citySelectElement=document.getElementById("cityID");@H_301_1@ citySelectElement.appendChild(optionElement);@H_301_1@ @H_301_1@ }@H_301_1@ }@H_301_1@ }@H_301_1@ }@H_301_1@ }@H_301_1@ @H_301_1@ @H_301_1@ @H_301_1@ function createAJAX(){@H_301_1@ var xhr = null;@H_301_1@ try{@H_301_1@ xhr = new ActiveXObject("microsoft.xmlhttp");@H_301_1@ }catch(e1){@H_301_1@ try{@H_301_1@ xhr = new XMLHttpRequest();@H_301_1@ }catch(e2){@H_301_1@ //alert("更换浏览器");@H_301_1@ }@H_301_1@ }@H_301_1@ return xhr;@H_301_1@ }@H_301_1@ @H_301_1@ </script>@H_301_1@ </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>"); } 原文链接:https://www.f2er.com/ajax/165066.html

猜你在找的Ajax相关文章