首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

使用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+MySql+Ajax+jQuery实现省市区三级联动功能示例

- Author -

WORSHIP亚萨

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
PHP Smarty生成EXCEL文档的代码
Aug 23 PHP
PHP中获取内网用户MAC地址（WINDOWS/linux）的实现代码
Aug 11 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
Jun 21 PHP
解析PHP计算页面执行时间的实现代码
Jun 18 PHP
PHP的preg_match匹配字符串长度问题解决方法
May 03 PHP
php中多维数组按指定value排序的实现代码
Aug 19 PHP
php单态设计模式(单例模式)实例
Nov 18 PHP
PHP使用MPDF类生成PDF的方法
Dec 08 PHP
thinkphp配置文件路径的实现方法
Aug 30 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
Jun 06 PHP
php创建类并调用的实例方法
Sep 25 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
Mar 09 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
mysql.user(1) 定时任务(2) 三子棋(2) 计时器(1) Mysql报错(1) blinker(1) MYSQL函数(1) turtle(1) 绘图(1) 信号库(1)
You might like
快速开发一个PHP扩展图文教程
2008/12/12 PHP
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
PHP实现的62进制转10进制，10进制转62进制函数示例
2019/06/06 PHP
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
Python中使用ElementTree解析XML示例
2015/06/02 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
tensorflow 模型权重导出实例
2020/01/24 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
浅析python 字典嵌套
2020/09/29 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
史上最全面的Java面试题汇总！
2015/02/03 面试题
高中同学聚会邀请函
2014/01/11 职场文书
专业技术职务聘任书
2014/03/29 职场文书
责任书格式
2015/01/29 职场文书
GPU服务器的多用户配置方法
2022/07/07 Servers