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

最新推荐文章于 2021-09-21 17:57:40 发布

huangjianxiang1875

最新推荐文章于 2021-09-21 17:57:40 发布

阅读量1.1k

点赞数

分类专栏： ajax 文章标签： ajax xmlhttprequest mysql 数据库 function query

本文链接：https://blog.csdn.net/huangjianxiang1875/article/details/7985087

版权

ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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" οnchange="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" οnchange="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;
?>

huangjianxiang1875

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用ajax写的省市区三级联动

该项目使用了数据库，这里就省了，直接把源码写上来了，详细代码到http://download.csdn.net/detail/huangjianxiang1875/4573883这里下载包含数据库showCities.php页面无标题文档//创建ajax引擎function getXmlHttpObject(){var xmlHttpRequ
复制链接

扫一扫