您的位置：首页 > 其它

使用ajax写的省市区三级联动

2012-09-16 18:13 295 查看

该项目使用了数据库，这里就省了，直接把源码写上来了，详细代码到

http://download.csdn.net/detail/huangjianxiang1875/4573883

这里下载包含数据库

showCities.php页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>无标题文档</title>

<script type="text/javascript" language="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="showCItiesPro.php"; //post

var data="provincecode="+$("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){

// window.alert(myXmlHttpRequest.responseXML);

//取出服务器的数据

var cities=myXmlHttpRequest.responseXML.getElementsByTagName("message");

$("city").length=0;

var myOption=document.createElement("option");

// myOption.value=city_value;

myOption.innerText="--请选择城市--";

$("city").appendChild(myOption);

//遍历并取出城市

for(var i=0;i<cities.length;i++){

var city_name=cities[i].childNodes[0].childNodes[0].nodeValue;

var city_value=cities[i].childNodes[1].childNodes[0].nodeValue;

//创建新的元素option

var myOption=document.createElement("option");

myOption.value=city_value;

myOption.innerText=city_name;

$("city").appendChild(myOption);

}

}

}

}

function $(id){

return document.getElementById(id);

}

function getCounty(){

myXmlHttpRequest=getXmlHttpObject();

if(myXmlHttpRequest){

var url="showCItiesPro.php"; //post

var data="city="+$("city").value;

myXmlHttpRequest.open("post",url,true);

myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//指定回调函数

myXmlHttpRequest.onreadystatechange=chuli1;

//发送

myXmlHttpRequest.send(data);

}

}

function chuli1(){

if(myXmlHttpRequest.readyState==4){

if(myXmlHttpRequest.status==200){

// window.alert(myXmlHttpRequest.responseXML);

//取出服务器的数据

var cities=myXmlHttpRequest.responseXML.getElementsByTagName("message");

$("county").length=0;

//遍历并取出城市

for(var i=0;i<cities.length;i++){

var city_name=cities[i].childNodes[0].childNodes[0].nodeValue;

var city_value=cities[i].childNodes[1].childNodes[0].nodeValue;

//创建新的元素option

var myOption=document.createElement("option");

myOption.value=city_value;

myOption.innerText=city_name;

$("county").appendChild(myOption);

}

}

}

}

</script>

</head>

<body>

<select id="sheng" onchange="getCities()">

<?php

$conn=mysql_connect("localhost","root","");//链接数据库

mysql_select_db("novel");//选择数据库

mysql_query("set names 'utf8'");//设定字符集

$sql="select * from province";//查询数据库province表也就是省

$result=mysql_query($sql);//执行语句赋值给变量

?>

<option value="">---省---</option>

<?php

while($row=mysql_fetch_array($result)){

?>

<option value="<?php echo $row['code'];?>"><?php echo $row['name'];?></option>

<?php

}

?>

</select>

<select id="city" onchange="getCounty()">

<option value="">---城市---</option>

</select>

<select id="county">

<option value="">---县城---</option>

</select>

</body>

</html>

showCitiesPro.php页面

<?php

//这两句话很重要，第一句话告诉浏览器返回的数据是xml格式

header("Content-Type:text/xml;charset=utf-8");

//告诉浏览器不要缓存数据

header("Cache-Control:no-cache");

$provincecode=$_POST['provincecode'];

$city=$_POST['city'];

// file_put_contents("a.txt",$province."\r\n",FILE_APPEND); 调试代码可以看到接受到的数据

$conn=mysql_connect("localhost","root","");//链接数据库

mysql_select_db("novel");//选择数据库

mysql_query("set names 'utf8'");//设定字符集

$info="";

if($provincecode!=""){

$sql="select * from city where provincecode=$provincecode";//查询数据库province表也就是省

$result=mysql_query($sql);//执行语句赋值给变量

$info.="<province>";

while($row=mysql_fetch_array($result)){

$info.="<message><city>{$row[name]}</city><city>{$row[code]}</city></message>";

}

$info.="</province>";

}else if($city!=""){

$sql="select * from area where citycode=$city";//查询数据库province表也就是省

$result=mysql_query($sql);//执行语句赋值给变量

$info.="<province>";

while($row=mysql_fetch_array($result)){

$info.="<message><county>{$row[name]}</county><county>{$row[code]}</county></message>";

}

$info.="</province>";

}

//file_put_contents("a.txt",$info."\r\n",FILE_APPEND);

echo $info;

?>

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

标签：

相关文章推荐

新的分享

章节导航