1

2

3

4

5

6

7

8

My JSP \'ajax5.jsp\' starting page

9

10

11

12

13

14

15

18

19 functioncreateXMLHttpRequest() {20 try{21 return newXMLHttpRequest();//大多數(shù)瀏覽器

22 }catch(e) {23 try{24 returnActvieXObject("Msxml2.XMLHTTP");//IE6.0

25 }catch(e) {26 try{27 returnActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本

28 }catch(e) {29 alert("用的是什么瀏覽器啊？");30 throwe;31 }32 }33 }34 }35 /*

36 * 1. 在文檔加載完畢時(shí)發(fā)送請(qǐng)求，得到所有省份名稱(chēng)，顯示在中37 * 2. 在選擇了新的省份時(shí)，發(fā)送請(qǐng)求(參數(shù)為省名稱(chēng))，得到xml文檔，即元素38 * 解析xml文檔，得到其中所有的，再得到每個(gè)元素的內(nèi)容，即市名，使用市名生成，插入到元素中39 */

40

41 window.οnlοad= function() {42 /*

43 ajax四步，請(qǐng)求ProvinceServlet，得到所有省份名稱(chēng)44 使用每個(gè)省份名稱(chēng)創(chuàng)建一個(gè)元素，添加到中45 */

46 varxmlHttp=createXMLHttpRequest();47 xmlHttp.open("GET","",true);48 xmlHttp.send(null);49 xmlHttp.onreadystatechange= function() {50 if(xmlHttp.readyState== 4 &&xmlHttp.status== 200) {51 //獲取服務(wù)器的響應(yīng)

52 vartext=xmlHttp.responseText;53 //使用逗號(hào)分隔它，得到數(shù)組

54 vararr=text.split(",");55 //循環(huán)遍歷每個(gè)省份名稱(chēng)，每個(gè)名稱(chēng)生成一個(gè)option對(duì)象，添加到中

56 for(vari= 0; i

58 op.value=arr[i];//設(shè)置op的實(shí)際值為當(dāng)前的省份名稱(chēng)

59 vartextNode=document.createTextNode(arr[i]);//創(chuàng)建文本節(jié)點(diǎn)

60 op.appendChild(textNode);//把文本子節(jié)點(diǎn)添加到op元素中，指定其顯示值

61

62 document.getElementById("p").appendChild(op);63 }64 }65 };66

67

68 /*

69 第二件事情：給添加改變監(jiān)聽(tīng)70 使用選擇的省份名稱(chēng)請(qǐng)求CityServlet，得到元素(xml元素)！！！71 獲取元素中所有的元素，遍歷之！獲取每個(gè)的文本內(nèi)容，即市名稱(chēng)72 使用每個(gè)市名稱(chēng)創(chuàng)建元素添加到73 */

74 varproSelect=document.getElementById("p");75 proSelect.οnchange= function() {76 varxmlHttp=createXMLHttpRequest();77 xmlHttp.open("POST","",true);78 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");79 xmlHttp.send("pname=" +proSelect.value);//把下拉列表中選擇的值發(fā)送給服務(wù)器！

80 xmlHttp.onreadystatechange= function() {81 if(xmlHttp.readyState== 4 &&xmlHttp.status== 200) {82 /*

83 把select中的所有option移除(除了請(qǐng)選擇)84 */

85 varcitySelect=document.getElementById("c");86 //獲取其所有子元素

87 varoptionEleList=citySelect.getElementsByTagName("option");88 //循環(huán)遍歷每個(gè)option元素，然后在citySelect中移除

89 while(optionEleList.length> 1) {//子元素的個(gè)數(shù)如果大于1就循環(huán)，等于1就不循環(huán)了！

90 citySelect.removeChild(optionEleList[1]);//總是刪除1下標(biāo)，因?yàn)?刪除了，2就變成1了！

91 }92

93

94 vardoc=xmlHttp.responseXML;95 //得到所有名為city的元素

96 varcityEleList=doc.getElementsByTagName("city");97 //循環(huán)遍歷每個(gè)city元素

98 for(vari= 0; i

100 varcityName;101 //獲取市名稱(chēng)

102 if(window.addEventListener) {//處理瀏覽器的差異

103 cityName=cityEle.textContent;//支持FireFox等瀏覽器

104 }else{105 cityName=cityEle.text;//支持IE

106 }107

108 //使用市名稱(chēng)創(chuàng)建option元素，添加到中

109 varop=document.createElement("option");110 op.value=cityName;111 //創(chuàng)建文本節(jié)點(diǎn)

112 vartextNode=document.createTextNode(cityName);113 op.appendChild(textNode);//把文本節(jié)點(diǎn)追加到op元素中

114

115 //把op添加到元素中

116 citySelect.appendChild(op);117 }118 }119 };120 };121 };122

123

124

125

126

省市聯(lián)動(dòng)

127

128 ===請(qǐng)選擇省===

129

130

131

132 ===請(qǐng)選擇市===

133

134

135

總結(jié)

以上是生活随笔為你收集整理的ajax省市联动案例,AJAX案例四：省市联动(示例代码)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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