省市联动:
代码如下:
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";//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"); <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; //创建新的元素option var 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>