省市联动ajax代码





<script type="text/javascript">
function createXmlHttpRequest() {


try {
return new XMLHttpRequest();
} catch (e) {
try {


return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}


}


window.onload = function() {


/*
 发送异步请求
*/


var xmlHttp = createXmlHttpRequest();


xmlHttp.open("GET", "<c:url value='/ProvinceServlet'/>", true);


xmlHttp.send(null);


xmlHttp.onreadystatechange = function() {


if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200)


var proArray = eval("(" + xmlHttp.responseText + ")");


for (var i = 0; i < proArray.length; i++) {


var pro = proArray[i];


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


option.value = pro.pid;//这里赋id为了好处理


var textNode = document.createTextNode(pro.pname);


option.appendChild(textNode);


document.getElementById("province").appendChild(option);


}


}


};


var province = document.getElementById("province");


province.onchange = function() {


var xmlHttp = createXmlHttpRequest();
xmlHttp.open("POST", "<c:url value='/CityServlet'/>", true);


xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded ");
//关键是怎么知道这个this就是option呢,这个this到底指的是什么
xmlHttp.send("pid=" + this.value);


xmlHttp.onreadystatechange = function() {


if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {


var c = document.getElementById("city");


var cOption = c.getElementsByTagName("option");


while (cOption.length > 1) {


c.removeChild(cOption[1]);


}


var cityPro = eval("(" + xmlHttp.responseText + ")");


for (var i = 0; i < cityPro.length; i++) {


var city = cityPro[i];


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


option.value = city.cid;


var textNode = document.createTextNode(city.cname);


option.appendChild(textNode);


c.appendChild(option);


}


}


};


};


};
</script>





  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值