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 相关文章推荐
PHP页面间传递参数实例代码
Jun 05 PHP
php echo()和print()、require()和include()函数区别说明
Mar 27 PHP
php异常处理技术,顶级异常处理器
Jun 13 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
Jun 26 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
Jun 30 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
Oct 30 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
Oct 08 PHP
php一个文件搞定微信jssdk配置
Dec 12 PHP
php实现的二分查找算法示例
Jun 20 PHP
PHP实现的回溯算法示例
Aug 15 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
May 09 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
Aug 30 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
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
php学习笔记 数组的常用函数
2011/06/13 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
jquery对table做排序操作的实例演示
2017/08/10 jQuery
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
python之PyMongo使用总结
2017/05/26 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
护理学中专毕业生求职信
2013/11/11 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
化验室安全管理制度
2015/08/06 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python