您的位置：首页 > 其它

4. AJAX 省市联动

2016-02-09 15:32 281 查看

showCities.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<script type="text/javascript">

function getXmlHttpObject()
{
if(window.XMLHttpRequest){
var xmlHttpRequestObject = new XMLHttpRequest();
//                alert(xmlHttpRequestObject);
}else{
var xmlHttpRequestObject = new XMLHttpRequest();
//                alert('NO');
}
return xmlHttpRequestObject;
}
var myXmlHttpRequest = '';

function getCities()
{
myXmlHttpRequest = getXmlHttpObject();
//            alert(myXmlHttpRequest);
if(myXmlHttpRequest){
var url = 'showCitiesPro.php';//post
var data = 'province=' + $('sheng').value ;
//                alert(data);
myXmlHttpRequest.open('post',url,true);
myXmlHttpRequest.onreadystatechange = chuli;
myXmlHttpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
myXmlHttpRequest.send(data);
}else{
alert('出错了');
}
}

function chuli()
{
if(myXmlHttpRequest.readyState == 4 && myXmlHttpRequest.status == 200){

var cities = myXmlHttpRequest.responseXML.getElementsByTagName('city');

$('city').length = 0;
var myOption = document.createElement('option');
myOption.innerHTML = '----城市---';
$('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.innerHTML = 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>
</select>
<select id="city">
<option value="">---城市---</option>
</select>
<select id="county">
<option value="">---县城---</option>
</select>
</body>
</html>

showCitiesPro.php

<?php

header('Content-Type:text/xml;charset=utf-8');
header('Cache-Control:no-cache');

//接收用户选择省的名字
$province = $_POST['province'];

//如何在调试过程中，看到接收到的数据
//写入文件
//到数据库取查询省有哪些城市(现在先不到数据库去)

$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>';
}

file_put_contents('mylog.txt',$info . '***********',FILE_APPEND);

echo $info;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航