ajax开发：ajax三级省市区联动

来源：互联网发布：网络管理基本功能编辑：程序博客网时间：2024/05/19 16:47

本文实例为大家分享了ajax三级联动展示的具体代码，供大家参考，具体内容如下

1. test.php

?
1
2
3
4
5
6
7
8
9
10
11
<scriptsrc="../jquery-1.11.2.min.js"></script>
<scriptsrc="sanji.js"></script>
<title>无标题文档</title>
</head>
 
<body>
<h1>三级联动</h1>
<divid="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();
  })
  
});
//加载省份的方法
functionLoadSheng()
{
 //省的父级代号
 varpcode = "0001";
 $.ajax({
  async:false,
  url:"chuli.php",
  data:{pcode:pcode},
  type:"POST",
  dataType:"TEXT",
  success:function(data){
   varhang = data.trim().split("|");
   varstr = "";
   for(vari=0;i<hang.length;i++)
   {
    varlie = hang[i].split("^");
    str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
   }
   $("#sheng").html(str);
  }
 });
}
//加载市的方法
functionLoadShi()
{
 //找市的父级代号
 varpcode = $("#sheng").val();
 $.ajax({
  async:false,
  url:"chuli.php",
  data:{pcode:pcode},
  type:"POST",
  dataType:"TEXT",
  success:function(data){
   varhang = data.trim().split("|");
   varstr = "";
   for(vari=0;i<hang.length;i++)
   {
    varlie = hang[i].split("^");
    str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
   }
   $("#shi").html(str);
  }
 });
}
 
//加载区的方法
functionLoadQu()
{
 //找区的父级代号
 varpcode = $("#shi").val();
 $.ajax({
  url:"chuli.php",
  data:{pcode:pcode},
  type:"POST",
  dataType:"TEXT",
  success:function(data){
   varhang = data.trim().split("|");
   varstr = "";
   for(vari=0;i<hang.length;i++)
   {
    varlie = 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=newDBDA();
$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
classDBDA
{
 public$host = "localhost";
 public$uid = "root";
 public$pwd = "123";
 public$dbname = "test_123";
 //执行SQL语句返回相应的结果
 //$sql 要执行的SQL语句
 //$type 代表SQL语句的类型，0代表增删改，1代表查询
 functionquery($sql,$type=0)
 {
  $db= newMySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
   
  $result= $db->query($sql);
   
  if($type)
  {
   //如果是查询，显示数据
   return$result->fetch_all();
  }
  else
  {
   //如果是增删改，返回true或者false
   return$result;
  }
 }
  
 //返回字符串的方法
 publicfunction strquery($sql,$type=1)
 {
  $db= newMySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
  $result= $db->query($sql);
  $arr= $result->fetch_all();
  $str="";
  foreach($arras $v)
  {
   $str= $str.implode("^",$v)."|";
  }
   
  $str= substr($str,0,strlen($str)-1);
  return$str;
 
 }
  
 //返回JSON
 functionJSONQuery($sql,$type=1)
 {
  $db= newMySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
  $r= $db->query($sql);
   
  if($type==1)
  {
   returnjson_encode($r->fetch_all(MYSQLI_ASSOC));
  }
  else
  {
   return$r;
  }
 }
}

阅读全文

0 0