showCities.php页面

<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){ //这里更严谨了 之前的案例没有 这个参数可以查询ajax手册了解

//取出服务器回送的数据

 

var cities=myXmlHttpRequest.responseXML.getElementsByTagName(“city”);

$(‘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>

 

**showCitiesProcess.php**

 

<?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;

 

?>

发表回复