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 相关文章推荐
资料注册后发信小技巧
Oct 09 PHP
PHP 操作文件的一些FAQ总结
Feb 12 PHP
PHP 文章中的远程图片采集到本地的代码
Jul 30 PHP
php引用返回与取消引用的详解
Jun 08 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
Jun 20 PHP
简单的php文件上传(实例)
Oct 27 PHP
php使用反射插入对象示例分享
Mar 11 PHP
ThinkPHP实现带验证码的文件上传功能实例
Nov 01 PHP
PHP Streams(流)详细介绍及使用
May 12 PHP
如何通过Linux命令行使用和运行PHP脚本
Jul 29 PHP
从刷票了解获得客户端IP的方法
Sep 21 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
Mar 16 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生成随机密码的三种方法小结
2010/09/04 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
php远程下载类分享
2016/04/13 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
Python中的index()方法使用教程
2015/05/18 Python
RC4文件加密的python实现方法
2015/06/30 Python
python实现批量图片格式转换
2020/06/16 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
执行Python程序时模块报错问题
2020/03/26 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
python安装后的目录在哪里
2020/06/21 Python
Python基于Faker假数据构造库
2020/11/30 Python
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
优秀交警事迹材料
2014/01/26 职场文书
小学老师寄语大全
2014/04/04 职场文书
通知的写法
2015/04/23 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
小学英语课教学反思
2016/02/15 职场文书