服务器之家

服务器之家 > 正文

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

时间:2021-06-26 16:18     来源/作者:WORSHIP亚萨

使用php+mysql+ajax+jquery实现省市区三级联动功能

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

实现技术:php ajax

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

使用chinastates表查询

ajax加载数据

1.这是chinastates表

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
// 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

?
1
2
3
4
5
6
7
<?php
$pcode = $_post["pcode"];
require_once "./dbda.class.php";
$db = new dbda();
 
$sql = "select * from chinastates where parentareacode='{$pcode}'";
echo $db->jsonquery($sql,0);

封装类

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<?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实现省市区三级联动功能示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。

原文链接:http://www.cnblogs.com/jly144000/archive/2017/09/14/7523105.html

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021德云社封箱演出完整版 2021年德云社封箱演出在线看
2021德云社封箱演出完整版 2021年德云社封箱演出在线看 2021-03-15
返回顶部