省市聯動 ajax
阿新 • • 發佈：2019-02-02
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>省市聯動</title> </head> <script language="javascript" type="text/javascript"> //建立ajax引擎 function getXmlHttpObject() { var xmlHttp=null; //不同的瀏覽器獲取物件xmlhttprequest 物件方法不一樣 try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } var myXmlHttpRequest=""; function getCities(){ myXmlHttpRequest=getXmlHttpObject(); if(myXmlHttpRequest){ var url="/ajax/cityprocess.php";//post方式 var data1="province="+$('sheng').value; myXmlHttpRequest.open("post",url,true);//非同步方式 //必須加的一句話 myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //指定回撥函式 myXmlHttpRequest.onreadystatechange=chuli; //傳送 myXmlHttpRequest.send(data1); } } function chuli(){ if(myXmlHttpRequest.readyState==4){ if(myXmlHttpRequest.status==200){ //取出伺服器返回的資料 var cities=myXmlHttpRequest.responseXML.getElementsByTagName('city'); $('city').length=1;//這個得寫上 //遍歷並去除城市 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); } } } } //封裝一個方法 function $(id){ return document.getElementById(id); } </script> <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="country"> <option value="">縣城</option> </select> </body> </html>
<?php //告訴瀏覽器使用utf8編碼 儲存時必須為無bom 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; ?>
