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

更新时间：2017年09月15日 08:29:57 作者：WORSHIP亚萨

下面小编就为大家带来一篇使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

要求：写一个省市区（或者年月日）的三级联动，实现地区或时间的下拉选择。

实现技术：php ajax

实现：省级下拉变化时市下拉区下拉跟着变化，市级下拉变化时区下拉跟着变化。

使用chinastates表查询

Ajax加载数据

1.这是chinastates表

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实现省市区三级联动功能示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Thinkphp5.0 框架Model模型简单用法分析
这篇文章主要介绍了Thinkphp5.0 框架Model模型简单用法,结合实例形式分析了thinkPHP5.0框架模型Model常用方法的简单使用技巧,需要的朋友可以参考下
2019-10-10
Laravel框架实现多数据库连接操作详解
这篇文章主要介绍了Laravel框架实现多数据库连接操作,结合实例形式详细分析了Laravel框架连接2个数据库的具体操作步骤与相关实现技巧,需要的朋友可以参考下
2019-07-07
用php实现选择排序的解决方法
本篇文章介绍了，使用php实现选择排序的解决方法。需要的朋友参考下
2013-05-05
使用Laravel中的查询构造器实现增删改查功能
这篇文章主要介绍了使用Laravel中的查询构造器实现增删改查功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-09-09
Laravel+jQuery实现AJAX分页效果
这篇文章主要介绍了Laravel+jQuery实现AJAX分页效果的方法,简单介绍了jQuery的ajax调用结合Laravel控制器实现无刷新分页功能的相关操作技巧,需要的朋友可以参考下
2016-09-09
php array_walk 对数组中的每个元素应用用户自定义函数详解
php array_walk函数将用户自定义函数应用到 array 数组中的每个单元，即使用用户自定义函数对数组中的每个元素做回调处理。本文章向大家讲解array_walk函数的基本语法及使用实例,需要的朋友可以参考下
2016-11-11
Laravel学习教程之View模块详解
这篇文章主要给大家介绍了关于Laravel学习教程之View模块的相关资料，文中通过示例代码将View模块介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-09-09
thinkphp连贯操作实例分析
这篇文章主要介绍了thinkphp连贯操作,以实例形式较为详细的分析了连贯操作的具体用法及常用的方法含义,是非常实用的技巧,需要的朋友可以参考下
2014-11-11
Zend Framework分发器用法示例
这篇文章主要介绍了Zend Framework分发器用法,结合实例形式分析了Zend Framework分发器的功能、定义及简单使用方法,需要的朋友可以参考下
2016-12-12
浅谈php中urlencode与rawurlencode的区别
下面小编就为大家带来一篇浅谈php中urlencode与rawurlencode的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具