使用php+mysql+ajax+jquery实现省市区三级联动功能
要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择。
实现技术:php ajax
实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化。
使用chinastates表查询
ajax加载数据
1.这是chinastates表
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实现省市区三级联动功能示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。
原文链接:http://www.cnblogs.com/jly144000/archive/2017/09/14/7523105.html