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学习笔记之二 php入门知识
Jan 12 PHP
php高级编程-函数-郑阿奇
Jul 04 PHP
30 个很棒的PHP开源CMS内容管理系统小结
Oct 14 PHP
PHP高级编程实例:编写守护进程
Sep 02 PHP
PHP实现抓取Google IP并自动修改hosts文件
Feb 12 PHP
php注册和登录界面的实现案例(推荐)
Oct 24 PHP
使用PHP免费发送定时短信的实例
Oct 24 PHP
php中static和const关键字用法分析
Dec 07 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
Feb 20 PHP
使用ThinkPHP生成缩略图及显示
Apr 27 PHP
php安装扩展mysqli的实现步骤及报错解决办法
Sep 23 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
Oct 17 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
php flv视频时间获取函数
2010/06/29 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
Python中用format函数格式化字符串的用法
2015/04/08 Python
Python的组合模式与责任链模式编程示例
2016/02/02 Python
Python网络爬虫实例讲解
2016/04/28 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
python剪切视频与合并视频的实现
2020/03/03 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
电大物流学生的自我评价
2013/10/25 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
幼儿园秋游感想
2014/03/12 职场文书
天猫活动策划方案
2014/08/21 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python
python unittest单元测试的步骤分析
2021/08/02 Python