用js實(shí)現(xiàn)簡(jiǎn)單的ajax二級(jí)聯(lián)動(dòng)（如上圖）

HTML代碼：

1 省份：<select id="province" onchange="getCity();" > 2 <option>請(qǐng)選擇--</option> 3 </select> 4 城市:<select id="city"> 5 <option>請(qǐng)選擇--</option> 6 </select>

js代碼：

1 <script type="text/javascript"> 2 //獲取不同瀏覽器的XMLHttpRequest對(duì)象 3 function getXMLHttpRequest(){ 4 var xmlHttp; 5 try{ 6 xmlHttp = new XMLHttpRequest(); 7 }catch(e){ 8 try{ 9 xmlHttp = new XMLHttpRequest("Msxml2.XMLHTTP"); 10 }catch(e){ 11 try{ 12 xmlHttp = new XMLHttpRequest("Mircrosoft.HTTP"); 13 }catch(e){ 14 alert("此瀏覽器不支持AJAX!"); 15 return false; 16 } 17 } 18 } 19 return xmlHttp; 20 } 21 //向服務(wù)器發(fā)送ajax請(qǐng)求 22 window.οnlοad=function(){ 23 //獲取頁(yè)面省份節(jié)點(diǎn) 24 25 var provinceElement = document.getElementById("province"); 26 var xmlHttp=getXMLHttpRequest(); 27 xmlHttp.open("POST","/JavaScript0505/Province",true); 28 //表示客戶端提交給服務(wù)器文本內(nèi)容的編碼方式 是URL編碼 29 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 30 xmlHttp.send(); 31 32 //接收服務(wù)器響應(yīng)數(shù)據(jù) 33 xmlHttp.onreadystatechange=function(){ 34 35 if(xmlHttp.readyState==4){ 36 if(xmlHttp.status==200){ 37 //獲得服務(wù)器輸出的xml文件 38 var provinceXML =xmlHttp.responseXML; 39 //獲取provinceXML文件中的province的集合 40 var provinces = provinceXML.getElementsByTagName("province"); 41 //循環(huán)provinces集合獲得province 的 name添加到頁(yè)面的select標(biāo)簽下 42 43 for(var i=0;i<provinces.length;i++){ 44 //創(chuàng)建<option></option> 45 var optionElement = document.createElement("option"); 46 //獲取province的name的值 47 var provinceName = provinces[i].getAttribute("name"); 48 //為option節(jié)點(diǎn)添加屬性 49 optionElement.setAttribute("name", provinceName); 50 //創(chuàng)建文本節(jié)點(diǎn)<option>xxx</option> 51 var textNode=document.createTextNode(provinceName); 52 //添加節(jié)點(diǎn) 53 optionElement.appendChild(textNode); 54 provinceElement.appendChild(optionElement); 55 56 } 57 } 58 } 59 }; 60 }; 61 function getCity(){ 62 //獲取已選擇的省份的名字 63 var selectedProvinceName=document.getElementById("province").value; 64 //獲取城市節(jié)點(diǎn) 65 var cityElement=document.getElementById("city"); 66 //向服務(wù)器發(fā)送數(shù)據(jù) 67 var xmlHttp = getXMLHttpRequest(); 68 xmlHttp.open("POST","/JavaScript0505/Province",true); 69 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 70 xmlHttp.send(); 71 xmlHttp.onreadystatechange=function(){ 72 if(xmlHttp.readyState==4){ 73 if(xmlHttp.status==200){ 74 var provinceXML = xmlHttp.responseXML; 75 var provinces = provinceXML.getElementsByTagName("province"); 76 var selectProvince=null; 77 for(var i=0;i<provinces.length;i++){ 78 if(selectedProvinceName==provinces[i].getAttribute("name")){ 79 selectProvince = provinces[i]; 80 break; 81 } 82 } 83 //在添加城市之前要?jiǎng)h除之前已經(jīng)存在城市節(jié)點(diǎn) 84 var oldOptions = cityElement.getElementsByTagName("option"); 85 for(var i=1;i<oldOptions.length;){ 86 cityElement.removeChild(oldOptions[i]); 87 } 88 //添加城市節(jié)點(diǎn) 89 var citys = selectProvince.getElementsByTagName("city"); 90 for(var i=0;i<citys.length;i++){ 91 var optionElement=document.createElement("option"); 92 optionElement.setAttribute("name", citys[i].firstChild.nodeValue); 93 var text = document.createTextNode(citys[i].firstChild.nodeValue); 94 optionElement.appendChild(text); 95 cityElement.appendChild(optionElement); 96 } 97 98 } 99 } 100 } 101 } 102 103 104 </script>

servlet代碼：

1 public void doPost(HttpServletRequest request, HttpServletResponse response) 2 throws ServletException, IOException { 3 response.setContentType("text/xml;charset=utf-8"); 4 PrintWriter out = response.getWriter(); 5 out.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>"); 6 out.println("<provinces>"); 7 out.println("<province name=\"北京\">"); 8 out.println("<city>東城區(qū)</city>"); 9 out.println("<city>西城區(qū)</city>"); 10 out.println("<city>海淀區(qū)</city>"); 11 out.println("<city>朝陽(yáng)區(qū)</city>"); 12 out.println("<city>昌平區(qū)</city>"); 13 out.println("<city>大興區(qū)</city>"); 14 out.println("</province>"); 15 out.println("<province name=\"天津\">"); 16 out.println("<city>靜海區(qū)</city>"); 17 out.println("<city>唐古</city>"); 18 out.println("<city>北晨區(qū)</city>"); 19 out.println("<city>河?xùn)|區(qū)</city>"); 20 out.println("<city>河西區(qū)</city>"); 21 out.println("</province>"); 22 out.println("<province name=\"湖北省\">"); 23 out.println("<city>武昌</city>"); 24 out.println("<city>漢陽(yáng)</city>"); 25 out.println("<city>十堰</city>"); 26 out.println("<city>宜昌</city>"); 27 out.println("</province>"); 28 out.println("<province name=\"山東省\">"); 29 out.println("<city>荷澤</city>"); 30 out.println("<city>煙臺(tái)</city>"); 31 out.println("<city>濟(jì)南</city>"); 32 out.println("<city>威海</city>"); 33 out.println("</province>"); 34 out.println("</provinces>"); 35 }

?

轉(zhuǎn)載于:https://www.cnblogs.com/41uLove/p/5469368.html

總結(jié)

以上是生活随笔為你收集整理的ajax实现二级联动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。