ajax 省市联动 代码

来源:互联网 发布:炮王吴亦凡 知乎 编辑:程序博客网 时间:2024/04/30 15:26

省市联动:


代码如下:

showCities.php:

<span style="font-size:18px;"><html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"/><script type="text/javascript">//创建ajax引擎function getXmlHttpObject(){var xmlHttpRequest;//不同的浏览器获取对象xmlhttprequest 对象方法不一样if(window.ActiveXObject){xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");}else{xmlHttpRequest=new XMLHttpRequest();}return xmlHttpRequest;}var myXmlHttpRequest="";function getCities(){myXmlHttpRequest=getXmlHttpObject();if(myXmlHttpRequest){var url="/ajax/showCitiesPro.php";//postvar 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");<span style="white-space:pre"></span>//每次加载数据之前将已存在数据清空$('city').length=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;//创建新的元素optionvar myOption=document.createElement("option");myOption.value=city_name;myOption.innerText=city_name;//添加到$('city').appendChild(myOption);}}}}//这里我们写一个函数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>    <option value="sichuan" >四川</option>    </select>    <select id="city">    <option value="">--城市--</option>    </select>         <select id="county">    <option value="">--县城--</option>    </select></body></html></span>

showCitiesProcess.php:

<span style="font-size:18px;"><?php//服务器端//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式header("Content-Type: text/xml;charset=utf-8");//告诉浏览器不要缓存数据header("Cache-Control: no-cache");//接收用户的选择的省的名字$province=$_POST['province'];file_put_contents("d:/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;?></span>


0 0
原创粉丝点击