本文实例为大家分享了ajax三级联动展示的具体代码,供大家参考,具体内容如下
1. test.php
1
2
3
4
5
6
7
8
9
10
11
|
<
script
src
=
"../jquery-1.11.2.min.js"
></
script
>
<
script
src
=
"sanji.js"
></
script
>
<
title
>无标题文档</
title
>
</
head
>
<
body
>
<
h1
>三级联动</
h1
>
<
div
id
=
"sanji"
></
div
>
</
body
>
</
html
>
|
2. sanji.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
|
// JavaScript Document
$(document).ready(
function
(e) {
//找到ID=SANJI的DIV,造三个下拉扔进去
$(
"#sanji"
).html(
"<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"
);
//加载省的数据
LoadSheng();
//加载市的数据
LoadShi();
//加载区的数据
LoadQu();
//给省的下拉加点击事件
$(
"#sheng"
).click(
function
(){
//重新加载市
LoadShi();
//重新加载区
LoadQu();
})
//给市的下拉加点击事件
$(
"#shi"
).click(
function
(){
//重新加载区
LoadQu();
})
});
//加载省份的方法
function
LoadSheng()
{
//省的父级代号
var
pcode =
"0001"
;
$.ajax({
async:
false
,
url:
"chuli.php"
,
data:{pcode:pcode},
type:
"POST"
,
dataType:
"TEXT"
,
success:
function
(data){
var
hang = data.trim().split(
"|"
);
var
str =
""
;
for
(
var
i=0;i<hang.length;i++)
{
var
lie = hang[i].split(
"^"
);
str = str+
"<option value='"
+lie[0]+
"'>"
+lie[1]+
"</option>"
;
}
$(
"#sheng"
).html(str);
}
});
}
//加载市的方法
function
LoadShi()
{
//找市的父级代号
var
pcode = $(
"#sheng"
).val();
$.ajax({
async:
false
,
url:
"chuli.php"
,
data:{pcode:pcode},
type:
"POST"
,
dataType:
"TEXT"
,
success:
function
(data){
var
hang = data.trim().split(
"|"
);
var
str =
""
;
for
(
var
i=0;i<hang.length;i++)
{
var
lie = hang[i].split(
"^"
);
str = str+
"<option value='"
+lie[0]+
"'>"
+lie[1]+
"</option>"
;
}
$(
"#shi"
).html(str);
}
});
}
//加载区的方法
function
LoadQu()
{
//找区的父级代号
var
pcode = $(
"#shi"
).val();
$.ajax({
url:
"chuli.php"
,
data:{pcode:pcode},
type:
"POST"
,
dataType:
"TEXT"
,
success:
function
(data){
var
hang = data.trim().split(
"|"
);
var
str =
""
;
for
(
var
i=0;i<hang.length;i++)
{
var
lie = hang[i].split(
"^"
);
str = str+
"<option value='"
+lie[0]+
"'>"
+lie[1]+
"</option>"
;
}
$(
"#qu"
).html(str);
}
});
}
|
3. chuli.php
1
2
3
4
5
6
7
8
9
|
<?php
//给一个父级代号,返回该父级代号下所有的子地区
require
"DBDA.class.php"
;
$db
=
new
DBDA();
$pcode
=
$_POST
[
"pcode"
];
$sql
=
"select areacode,areaname from chinastates where parentareacode='{$pcode}'"
;
echo
$db
->StrQuery(
$sql
);
|
引用的封装类里面返回字符串的方法
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
|
<?php
class
DBDA
{
public
$host
=
"localhost"
;
public
$uid
=
"root"
;
public
$pwd
=
"123"
;
public
$dbname
=
"test_123"
;
//执行SQL语句返回相应的结果
//$sql 要执行的SQL语句
//$type 代表SQL语句的类型,0代表增删改,1代表查询
function
query(
$sql
,
$type
=0)
{
$db
=
new
MySQLi(
$this
->host,
$this
->uid,
$this
->pwd,
$this
->dbname);
$result
=
$db
->query(
$sql
);
if
(
$type
)
{
//如果是查询,显示数据
return
$result
->fetch_all();
}
else
{
//如果是增删改,返回true或者false
return
$result
;
}
}
//返回字符串的方法
public
function
strquery(
$sql
,
$type
=1)
{
$db
=
new
MySQLi(
$this
->host,
$this
->uid,
$this
->pwd,
$this
->dbname);
$result
=
$db
->query(
$sql
);
$arr
=
$result
->fetch_all();
$str
=
""
;
foreach
(
$arr
as
$v
)
{
$str
=
$str
.implode(
"^"
,
$v
).
"|"
;
}
$str
=
substr
(
$str
,0,
strlen
(
$str
)-1);
return
$str
;
}
//返回JSON
function
JSONQuery(
$sql
,
$type
=1)
{
$db
=
new
MySQLi(
$this
->host,
$this
->uid,
$this
->pwd,
$this
->dbname);
$r
=
$db
->query(
$sql
);
if
(
$type
==1)
{
return
json_encode(
$r
->fetch_all(MYSQLI_ASSOC));
}
else
{
return
$r
;
}
}
}
|