PHP+Mysql+Ajax+JS实现省市区三级联动


Posted in PHP onMay 23, 2014

基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省、市、区获取方法类似,PHP中通过参数不同执行不同的select语句。

index.html代码:

<!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>
<title>省市区三级联动</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<script src="scripts/thumbnails.js" type="text/javascript"></script>
</head>
<body>
<div id="description">
<select style="width:100px; " onchange="sech(this.id)" id="sheng">
<option value="province">请选择省份</option>
</select>
<select onchange="sech(this.id)" id="shi">
<option value="city">请选择市区</option>
</select>
<select id="xian">
<option value="county">请选择县乡</option>
</select>
</div>
</div>
</body>
</html>

thumbnails.js代码:

window.onload = getProvince;function createRequest() {//Ajax于PHP交互需要对象
  try {
    request = new XMLHttpRequest();//创建一个新的请求对象;
  } catch (tryMS) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (otherMS) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = null;
      }
    }
  }
  return request;
}
function sech(id) {//省市改变时触发,select的onchange事件
    var aa = document.getElementById(id);
if(id=="sheng"){
      getCity(aa.value);//这里aa.value为省的id
}
if(id=="shi")
{
getCounty(aa.value);//这里aa.value为市的id
}
}
function getProvince() {//获取所有省
  request = createRequest();
  if (request == null) {
    alert("Unable to create request");
    return;
  }
  var url= "getDetails.php?ID=0";//ID=0时传递至PHP时让其获取所有省
  request.open("GET", url, true);
  request.onreadystatechange = displayProvince; //设置回调函数
  request.send(null);    //发送请求
}
function getCity(id){//获取省对应的市
  request = createRequest();
  if (request == null) {
    alert("Unable to create request");
    return;
  }
  var url= "getDetails.php?ID=" + escape(id);
  request.open("GET", url, true);
  request.onreadystatechange = displayCity;
  request.send(null);
}
function getCounty(id){//获取市对应的区
  request = createRequest();
  if (request == null) {
    alert("Unable to create request");
    return;
  }
  var url= "getDetails.php?ID=" + escape(id);
  request.open("GET", url, true);
  request.onreadystatechange = displayCounty;
  request.send(null);
}
 
function displayProvince() {//将获取的数据动态增加至select
  if (request.readyState == 4) {
    if (request.status == 200) {
  var a=new Array;
var b=request.responseText;//将PHP返回的数据赋值给b
 a=b.split(",");//通过","将这一数据保存在数组a中
  document.getElementById("sheng").length=1;
  var obj=document.getElementById("sheng');  
  for(i=0;i
      obj.options.add(new Option(a[i],i+1)); //动态生成OPTION加到select中,第一个参数为Text,第二个参数为Value值.
    }
  }
}
 
function displayCity() {//将获取的数据动态增加至select
  if (request.readyState == 4) {
    if (request.status == 200) {
  var a=new Array;
var b=request.responseText;
 a=b.split(",");
  document.getElementById("shi").length=1;//重新选择
  document.getElementById("xian").length=1;//重新选择
if(document.getElementById("sheng").value!="province"){
  var obj=document.getElementById('shi');  
  for(i=0;i
      obj.options.add(new Option(a[i], document.getElementById("sheng").value*100+i+1)); //ocument.getElementById("sheng").value*100+i+1对应的是市的ID。
}
    }
  }
}
function displayCounty() {//将获取的数据增加至select
  if (request.readyState == 4) {
    if (request.status == 200) {
  var a=new Array;
var b=request.responseText;
 a=b.split(",");
 document.getElementById("xian").length=1;
if(document.getElementById("sheng").value!="province"&&document.getElementById("shi").value!="city"){
  var obj=document.getElementById('xian');  
  for(i=0;i
      obj.options.add(new Option(a[i],i+1001)); 
}
    }
  }
}

getDetails.php代码:

<?php
header("Content-Type: text/html; charset=gb2312");
$conn = new COM("ADODB.Connection") or die("Cannot start ADO");
$connstr = "Provider=SQLOLEDB;Persist Security Info=False;User ID=root;Password=123456;Initial Catalog=area;Data Source=localhost";
if($_REQUEST['ID']==0){//获得省列表
$conn->Open($connstr); //建立数据库连接
$sqlstr = "select name from Province"; //设置查询字符串
$rs = $conn->Execute($sqlstr); //执行查询获得结果
$num_cols = $rs->Fields->Count(); //得到数据集列数
$Province=array();
$i=0;
while (!$rs->EOF) {
$Province[$i]=$rs->Fields['name']->Value.",";
$rs->MoveNext();
$i++;
}
foreach($Province as $val)
echo $val;
$conn->Close();
$rs = null;
$conn = null;
}
if($_REQUEST['ID']>0&&$_REQUEST['ID']<35){//获得省对应的市列表
$conn->Open($connstr); //建立数据库连接
$sqlstr = "select name from City where cid=".$_REQUEST['ID']; //设置查询字符串
$rs = $conn->Execute($sqlstr); //执行查询获得结果
$num_cols = $rs->Fields->Count(); //得到数据集列数
$City=array();
$i=0;
while (!$rs->EOF) {
$City[$i]=$rs->Fields['name']->Value.",";
$rs->MoveNext();
$i++;
}
foreach($City as $val)
echo $val;
$conn->Close();
$rs = null;
$conn = null;
}
if($_REQUEST['ID']>100){//获得省市对应的县列表
$conn->Open($connstr); //建立数据库连接
$sqlstr = "select name from County where cid=".$_REQUEST['ID']; //设置查询字符串
$rs = $conn->Execute($sqlstr); //执行查询获得结果
$num_cols = $rs->Fields->Count(); //得到数据集列数
$County=array();
$i=0;
while (!$rs->EOF) {
$County[$i]=$rs->Fields['name']->Value.",";
$rs->MoveNext();
$i++;
}
foreach($County as $val)
echo $val;
$conn->Close();
$rs = null;
$conn = null;
}
?>

数据库设计,表格Province表,City表,County表。
要求:Province表需要id和name,id建议从1至34,例如北京id为1,广东id为2,以此类推;
        City表需要id,name和cid,id为cid*100+1,cid为该市的上级,例如深圳的上级为广东省,cid为2的话,深圳的id就是201,以此类推。
        County表需要id,name和cid,因为是三级的关系,id可以随意,建议从10001开始自增。cid为所在上级,例如宝安区的cid为201,龙岗区的cid也为201;

截图:

 HTML效果:

PHP+Mysql+Ajax+JS实现省市区三级联动

完成后效果:

PHP+Mysql+Ajax+JS实现省市区三级联动

PHP+Mysql+Ajax+JS实现省市区三级联动

PHP+Mysql+Ajax+JS实现省市区三级联动

备注:PHP是服务器端的,建议发布网站后通过ip调试。

PHP 相关文章推荐
基于Snoopy的PHP近似完美获取网站编码的代码
Oct 23 PHP
Yii核心组件AssetManager原理分析
Dec 02 PHP
PHP上传文件时自动分配路径的方法
Jan 09 PHP
分享php分页的功能模块
Jun 16 PHP
php设计模式之委托模式
Feb 13 PHP
深入浅析Yii admin的权限控制
Aug 31 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
Oct 13 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
Nov 25 PHP
PHP设计模式之注册树模式分析
Jan 26 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
Apr 21 PHP
PHP后台实现微信小程序登录
Aug 03 PHP
php 处理png图片白色背景色改为透明色的实例代码
Dec 10 PHP
PHP解析html类库simple_html_dom的转码bug
May 22 #PHP
浅谈discuz密码加密的方式
May 22 #PHP
PHP函数strip_tags的一个bug浅析
May 22 #PHP
PHP学习笔记之字符串编码的转换和判断
May 22 #PHP
PHP+memcache实现消息队列案例分享
May 21 #PHP
php+highchats生成动态统计图
May 21 #PHP
PhpDocumentor 2安装以及生成API文档的方法
May 21 #PHP
You might like
批量修改RAR文件注释的php代码
2010/11/20 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
浅析javascript闭包 实例分析
2010/12/25 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
python定向爬取淘宝商品价格
2018/02/27 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
linux面试题参考答案(4)
2014/09/21 面试题
介绍一下Java的事务处理
2012/12/07 面试题
什么是Web Service?
2012/07/25 面试题
历史学专业毕业生求职信
2013/09/27 职场文书
大学社团活动总结
2014/04/26 职场文书
物流管理专业求职信
2014/05/29 职场文书
委托书英文
2015/01/28 职场文书
大学感恩节活动总结
2015/05/05 职场文书
商标侵权律师函
2015/05/27 职场文书
收入证明申请书
2015/06/12 职场文书
小学运动会前导词
2015/07/20 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书