使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例


Posted in PHP onSeptember 15, 2017

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择。

实现技术:php ajax

实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化。

使用chinastates表查询

Ajax加载数据

1.这是chinastates表

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例

2.做一个简单php:Ajax_eg.php

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="bootstrap/js/jquery-1.11.2.min.js"></script>
 </head>
 <style>
 .sanji{
  margin-left: 550px;
  margin-top: 150px;
 }
 </style>
 <body>
  <div class="sanji"> </div>
 </body>

</html>

3.根据前一个页面做jquery:Ajax_ssq.js

// JavaScript Document

//当页面内容都加载完才执行
$(document).ready(function(e) {
 //加载三个下拉列表
 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
 
 //加载显示数据
 //1.加载省份
 LoadSheng();
 //2.加载市
 LoadShi();
 //3.加载区
 LoadQu();

 //当省份选中变化,重新加载市和区
 $("#sheng").change(function(){ //当元素的值发生改变时,会发生 change 事件,该事件仅适用于文本域(text field),以及 textarea 和 select 元素。
  //加载市
   LoadShi();
  //加载区
   LoadQu();
  
  })
 
 //当市选中变化,重新加载区
 $("#shi").change(function(){
  //加载区
  LoadQu();
  })
  
 
});


//加载省份信息
function LoadSheng()
{
 //取父级代号
 var pcode ="0001";
 
 //根据父级代号查数据
 $.ajax({
    //取消异步,也就是必须完成上面才能走下面
    async:false,
    url:"load.php",
    data:{pcode:pcode},
    type:"POST",
    dataType:"JSON",
    success: function(data){
      var str="";
      //遍历数组,把它放入sj
      for(var k in data){
       str=str+"<option value='"+data[k].[0]+"'>"+data[k].[1]+"</option>";
      }
      $("#sheng").html(str);      
    }      
  }); 
}

//加载市信息
function LoadShi()
{
 //取父级代号
 var pcode =$("#sheng").val();
 
 //根据父级代号查数据
 $.ajax({
    //取消异步,也就是必须完成上面才能走下面
    async:false,
    url:"load.php",
    data:{pcode:pcode},
    type:"POST",
    dataType:"JSON",
    success: function(data){
      var str="";
      //遍历数组,把它放入sj
      for(var k in data){
       str=str+"<option value='"+data[k].[0]+"'>"+data[k].[0]+"</option>";
      }
      $("#shi").html(str);      
    }      
  }); 
}

//加载区信息
function LoadQu()
{
 //取父级代号
 var pcode =$("#shi").val();
 
 //根据父级代号查数据
 $.ajax({
    //不需要取消异步
    url:"load.php",
    data:{pcode:pcode},
    type:"POST",
    dataType:"JSON",
    success: function(data){
      var str="";
      //遍历数组,把它放入sj
      for(var k in data){
       str=str+"<option value='"+data[k].[0]+"'>"+data[k].[1]+"</option>";       
      }
      $("#qu").html(str);      
    }      
  }); 
}

4.再把数据库连接起来 :load.php,把DBDA重新加载一个方法:JsonQuery

<?php
$pcode = $_POST["pcode"];
require_once "./DBDA.class.php";
$db = new DBDA();

$sql = "select * from chinastates where parentareacode='{$pcode}'";
echo $db->JsonQuery($sql,0);

封装类

<?php 
class DBDA{
 public $host="localhost";
 public $uid="root";
 public $pwd="";
 public $dbname="0710_info";
 /* 
  query方法:执行用户给的sql语句,并返回相应的结果
  $sql:用户需要执行的sql语句
  $type:用户需要执行的sql语句的类型
  return:如果是增删语句改返回true或false,如果是查询语句返回二维数组
  */
 public function query($sql,$type=1){//默认true为增删改
  $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
  if(mysqli_connect_error()){
   return "连接失败!"; 
  }
  $result = $db->query($sql);
  if($type==1){
   return $result;//增删改语句返回true或false
  }else{
   return $result->fetch_all();//查询语句返回二维数组
  } 
 }
 //此方法用于ajax中用于对取出的数据(二维数组)进行拼接字符串处理
 public function StrQuery($sql,$type=1){
  $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
  if(mysqli_connect_error()){
   return "连接失败!"; 
  }
  $result = $db->query($sql);
  if($type==1){
   return $result;//增删改语句返回true或false
  }else{
   $arr = $result->fetch_all();//查询语句返回二维数组
   $str = "";
   foreach($arr as $v){
    $str = $str.implode("^", $v)."|";
   }
   $str = substr($str, 0,strlen($str)-1);
   return $str;
  } 
 } 
 //此方法用于ajax中用于返回为json数据类型时使用
 public function JsonQuery($sql,$type=1){
  $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
  if(mysqli_connect_error()){
   return "连接失败!"; 
  }
  $result = $db->query($sql);
  if($type==1){
   return $result;//增删改语句返回true或false
  }else{
   $arr = $result->fetch_all();//查询语句返回二维(关联)数组
   return json_encode($arr);//将数组转换成json
  } 
 }
}

实现效果:

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例

以上这篇使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
PHP 5.0对象模型深度探索之对象复制
Mar 27 PHP
php数组对百万数据进行排除重复数据的实现代码
Jun 08 PHP
Zend的Registry机制的使用说明
May 02 PHP
判断php数组是否为索引数组的实现方法
Jun 13 PHP
php.ini 配置文件的深入解析
Jun 17 PHP
php不允许用户提交空表单(php空值判断)
Nov 12 PHP
ThinkPHP模板输出display用法分析
Nov 26 PHP
PHP里8个鲜为人知的安全函数分析
Dec 09 PHP
python进程与线程小结实例分析
Nov 11 PHP
Laravel 自定命令以及生成文件的例子
Oct 23 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
Feb 27 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
Mar 23 PHP
Laravel框架用户登陆身份验证实现方法详解
Sep 14 #PHP
LNMP部署laravel以及xhprof安装使用教程
Sep 14 #PHP
Laravel框架实现redis集群的方法分析
Sep 14 #PHP
ThinkPHP开发--使用七牛云储存
Sep 14 #PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
Sep 13 #PHP
PHP memcache在微信公众平台的应用方法示例
Sep 13 #PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
Sep 13 #PHP
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
php中preg_match的isU代表什么意思
2015/10/01 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
javascript整除实现代码
2010/11/23 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
vue.js中created方法作用
2018/03/30 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
Python读取word文本操作详解
2018/01/22 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
巴西宠物商店:Cobasi
2019/04/19 全球购物
初中教师业务学习材料
2014/05/12 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年保卫工作总结
2014/12/05 职场文书
2014年统战工作总结
2014/12/09 职场文书
2015年司机工作总结
2015/04/23 职场文书