使用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 截取字符串 分别适合GB2312和UTF8编码情况
Feb 12 PHP
PHP实现搜索相似图片
Sep 22 PHP
php有效防止图片盗用、盗链的两种方法
Nov 01 PHP
mac os快速切换多个PHP版本的方法
Mar 07 PHP
thinkPHP5.0框架API优化后的友好性分析
Mar 17 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
Mar 25 PHP
PHP实现的获取文件mimes类型工具类示例
Apr 08 PHP
Laravel框架实现利用监听器进行sql语句记录功能
Jun 06 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
Aug 15 PHP
PHP反射原理与用法深入分析
Sep 28 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
Oct 16 PHP
PHP 对象接口简单实现方法示例
Apr 13 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
Javascript之文件操作
2007/03/07 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
微信小程序实现图片压缩
2019/12/03 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
Python 基础教程之包和类的用法
2017/02/23 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
python ChainMap的使用和说明详解
2019/06/11 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
django API 中接口的互相调用实例
2020/04/01 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
html5清空画布方法(三种)
2017/10/16 HTML / CSS
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
经贸日语专业个人求职信范文
2014/04/29 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
python全面解析接口返回数据
2022/02/12 Python