ajax经典案例--省市联动
ajax的省市联动案例
如果我们的代码比较复杂，可以通过file_put_contents来输出信息到某个日志。
在一个元素中添加另一个元素使用的方法是：appendChild()。
函数appendChild()写错是有问题的。不要写错appendChlid()了。
showCities.php
<html>
<head>
<meta http-equiv="content-type"content="text/html;charset=utf-8"/>
<script language="javascript" type="text/javascript">
//创建ajax引擎
function getXmlHttpObject(){
var xmlHttpRequest;
if(window.ActiveObject){
xmlHttpRequest=new ActiveObject("Microsoft.XMLHTTP");
}else{
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest="";
function getCities(){
myXmlHttpRequest=getXmlHttpObject();
if(myXmlHttpRequest){
var url="/showCitiesPro.php";//post方式提交
var data="province="+$("sheng").value;
myXmlHttpRequest.open("post",url,true);//异步方式
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回调函数
myXmlHttpRequest.onreadystatechange=chuli;
//发送
myXmlHttpRequest.send(data);
}
}
function chuli(){
if(myXmlHttpRequest.readyState==4){
if(myXmlHttpRequest.status==200){
//取出服务器回送的数据
var cities=myXmlHttpRequest.responseXML.getElementsByTagName("city");
//解决方案是添加如下代码
$("city").length=0;
//犯错：$("city").length=0;写出$("city").lenth=0;
var myOption=document.createElement("option");
myOption.innerText="--城市--";
//添加到
$("city").appendChild(myOption);
//解决方案
//遍历并取出城市
for(var i=0;i<cities.length;i++){
//这里出现了一个问题，每次点击省份，市的下拉列表中的内容会不断增加（重复),这是因为没有刷新，解决方案：将
var city_name=cities[i].childNodes[0].nodeValue;
//window.alert(city_name);
//创建新的元素option
var myOption=document.createElement("option");
myOption.value=city_name;
myOption.innerText=city_name;
//添加到
$("city").appendChild(myOption);
//在一个元素中添加另一个元素使用appendChild()；
}
}
}
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<select id="sheng" onchange="getCities();">
<option value="">----省----</option>
<option value="zhejiang">浙江</option>
<option value="jiangsu">江苏</option>
</select>
<select id="city">
<option value="">--城市--</option>
</select>
<select id="county">
<option value="">--县城--</option>
</select>
</select>
</body>
</html>
showCitiesPro.php
<?php //服务器端 //这里两句话很重要，第一句话告诉浏览器返回的数据是xml格式 header("content-Type:text/xml;charset=utf-8"); //告诉浏览器不要缓存数据 header("Cache-Control:no-cache"); //接收用户的选择的省的名字 $province=$_POST['province']; //ajax调试很困难 //如何在调试过程中，看到接收到的数据。 file_put_contents("D:/install/wamp/www/mylog.log",$province."\r\n",FILE_APPEND); //如何在调试过程中，看到接收的数据 //到数据库去查询省有哪些城市（现在先不到数据库中。) $info=""; if($province=="zhejiang"){ $info="<province><city>杭州</city><city>温州</city><city>宁波</city></province>"; }else if($province=="jiangsu"){ $info="<province><city>南京</city><city>徐州</city><city>苏州</city></province>"; } echo $info; ?>
