PHP+Ajax三种方法实现省市县三级联动

最新推荐文章于 2022-01-02 13:57:47 发布
原创 最新推荐文章于 2022-01-02 13:57:47 发布 · 1.3w 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#AJAX #PHP #json #mysql #数据库

本文介绍了使用PHP和Ajax实现省市县三级联动的三种不同方法。第一种方法是服务器返回HTML代码，但在IE下存在兼容性问题。第二种方法是服务器返回自定义字符串，客户端通过拆分字符串来实现效果。第三种方法是服务器返回Json数据，客户端解析Json并动态生成下拉选项，这种方法兼容性更好。
        实现省、市、县三级联动是一个最典型、最常用的一个ajax应用案例，当用户选择省的时候出现了该省的所有的市；当用户选择市的时候出现了该市所有的县，那么将怎样实现这样的三级联动的效果呢？我们不妨做个简单的分析:

      想要实现省市县三级联动效果并不难，假设数据库中已经有一个地区的表了，里面存储所有的省市县的信息，实现思路：
      1) 初始化所有的省份，这个可以直接从数据库中查询出来省份
      2）当用户选择省份的时候触发事件，把当前的省份的id通过ajax发出请求传递到服务端的程序中
      3）服务端根据客户端的请求，查询数据库，并按照一定的格式返回给客户端
      4）客户端获取服务端的数据，进行必要的处理显示出来

       服务端的程序根据id查询后，把结果可以封装成多种格式，比如：html 、特殊字符串、Json格式等，下面我们来看下每一种格式都是如何实现的：
       第一种：服务端返回 html格式的情况
       客户端请求页面：

[php] view plain copy print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>3G开发者联盟-ajax-html.html</title> 
  6. </head> 
  7.  
  8. <body> 
  9.  
  10. <select id="sheng" onchange="getArea(this.value,'shi')" ></select> 省 <select id="shi" onchange="getArea(this.value,'xian')" ></select> 市 <select id="xian" ></select>  
  11. </body> 
  12. </html> 
  13. <script language="javascript" type="text/javascript"> 
  14.  
  15. function getArea(id,p){ 
  16.  
  17. //初始化ajax 
  18. var xhr = new XMLHttpRequest(); 
  19. var url = "./area-html.php?id="+id+"&r="+Math.random(); 
  20.  
  21. //打开请求 
  22. xhr.open("get",url,true); 
  23.  
  24. //发送数据 
  25. xhr.send(null); 
  26.  
  27. //等待响应 
  28. xhr.onreadystatechange = function (){ 
  29.      
  30. if(xhr.readyState == 4){ 
  31.  
  32. document.getElementById(p).innerHTML = xhr.responseText; 
  33.  
  34. } 
  35.  
  36.  
  37. }  
  38. //响应的结果直接放到对应的下拉菜单中 
  39.  
  40. } 
  41.  
  42. //加载所有的省份 
  43. getArea("",'sheng') 
  44. </script>  
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>3G开发者联盟-ajax-html.html</title>
	</head>
	
	<body>
	
	<select id="sheng" onchange="getArea(this.value,'shi')" ></select> 省 <select id="shi" onchange="getArea(this.value,'xian')" ></select> 市 <select id="xian" ></select> 
	</body>
	</html>
	<script language="javascript" type="text/javascript">
	
	function getArea(id,p){
	
	//初始化ajax
	var xhr = new XMLHttpRequest();
	var url = "./area-html.php?id="+id+"&r="+Math.random();
	
	//打开请求
	xhr.open("get",url,true);
	
	//发送数据
	xhr.send(null);
	
	//等待响应
	xhr.onreadystatechange = function (){
.	
	if(xhr.readyState == 4){
	
	document.getElementById(p).innerHTML = xhr.responseText;
	
	}
	
	
	} 
	//响应的结果直接放到对应的下拉菜单中
	
	}
	
	//加载所有的省份
	getArea("",'sheng')
	</script>


服务端返回html标签代码：

[php] view plain copy print ?
  1. <?php 
  2. header("Content-Type:text/html;charset=UTF-8");  
<?php
 header("Content-Type:text/html;charset=UTF-8");
[php] view plain copy print ?
  1. //连接数据库 
  2. include("../include/dbconn.php"); 
  3. //根据用户返回的ID查询 
  4. $id=$_GET['id']; 
  5. $sql="select id,name from area where id like '".$id."__'"; 
  6. $rs=mysql_query($sql); 
  7. //将查询的结果封装成html标记 
  8. //echo mysql_num_rows($rs); 
  9. echo "<option value='0'>请选择</option>"; 
  10. while($rows=mysql_fetch_assoc($rs)){ 
  11.  
  12. echo '<option value=\''.$rows['id'].'\'>'.$rows['name'].'</option>'; 
  13.  
  14. } 
  15.  
  16. ?>  
//连接数据库
include("../include/dbconn.php");
//根据用户返回的ID查询
$id=$_GET['id'];
$sql="select id,name from area where id like '".$id."__'";
$rs=mysql_query($sql);
//将查询的结果封装成html标记
//echo mysql_num_rows($rs);
echo "<option value='0'>请选择</option>";
while($rows=mysql_fetch_assoc($rs)){

echo '<option value=\''.$rows['id'].'\'>'.$rows['name'].'</option>';

}

?>



上述效果火狐下没有问题，但是服务器返回html代码的弊端是 document.getElementById(p).innerHTML = xhr.responseText;这句话在IE下有问题，IE不识别下拉菜单的innerHTML属性

第二种：服务器返回 自定义的 字符串 客户端通过 拆分字符串实现效果


  客户端代码如下：

[php] view plain copy print ?
  1. 1.  <?php 
  2. 2.  header("Content-Type:text/html;charset=UTF-8"); 
  3. 3.  //连接数据库 
  4. 4.  include("../include/dbconn.php"); 
  5. 5.  //根据用户返回的ID查询 
  6. 6.  $id=$_GET['id']; 
  7. 7.  $sql="select id,name from area where id like '".$id."__'"; 
  8. 8.  $rs=mysql_query($sql); 
  9. 9.  //将查询的结果封装成html标记 
  10. 10. //echo mysql_num_rows($rs); 
  11. 11. //echo "<option value='0'>请选择</option>"; 
  12. 12. echo ":"; 
  13. 13. while($rows=mysql_fetch_assoc($rs)){ 
  14. 14.  
  15. 15. echo ';'.$rows['id'].':'.$rows['name']; 
  16. 16.  
  17. 17. } 
  18. 18.  
  19. 19. ?>  
1.	<?php
2.	header("Content-Type:text/html;charset=UTF-8");
3.	//连接数据库
4.	include("../include/dbconn.php");
5.	//根据用户返回的ID查询
6.	$id=$_GET['id'];
7.	$sql="select id,name from area where id like '".$id."__'";
8.	$rs=mysql_query($sql);
9.	//将查询的结果封装成html标记
10.	//echo mysql_num_rows($rs);
11.	//echo "<option value='0'>请选择</option>";
12.	echo ":";
13.	while($rows=mysql_fetch_assoc($rs)){
14.	
15.	echo ';'.$rows['id'].':'.$rows['name'];
16.	
17.	}
18.	
19.	?>

第二种方法实现起来比较容易理解，而且能够兼容IE和火狐 ，如果新手的话建议使用此种方法
第三种 ：服务器端返回Json数据格式，客户端解析Json产生Json对象，实现省市县三级联动效果
客户端代码：


[javascript] view plain copy print ?
  1. 1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. 2.  <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. 3.  <head> 
  4. 4.  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. 5.  <title>无标题文档</title> 
  6. 6.  </head> 
  7. 7.   
  8. 8.  <body> 
  9. 9.   
  10. 10. <select id="sheng" onchange="getArea(this.value,'shi')" ></select> 省 <select id="shi" onchange="getArea(this.value,'xian')" ></select> 市 <select id="xian" ></select>  
  11. 11. </body> 
  12. 12. </html> 
  13. 13. <script language="javascript" type="text/javascript"> 
  14. 14.  
  15. 15. function getArea(id,p){ 
  16. 16.  
  17. 17. //初始化ajax 
  18. 18. var xhr = new XMLHttpRequest(); 
  19. 19. var url = "./area-json3.php?id="+id+"&r="+Math.random(); 
  20. 20. var sel=document.getElementById(p); 
  21. 21. //打开请求 
  22. 22. xhr.open("get",url,true); 
  23. 23.  
  24. 24. //发送数据 
  25. 25. xhr.send(null); 
  26. 26.  
  27. 27. //等待响应 
  28. 28. xhr.onreadystatechange = function (){ 
  29. 29.  
  30. 30. if(xhr.readyState == 4){ 
  31. 31.  
  32. 32. var jsonstr=xhr.responseText; 
  33. 33. //alert(jsonstr); 
  34. 34. //清空下拉菜单 
  35. 35. sel.length=0; 
  36. 36.  
  37. 37. var obj=eval("("+jsonstr+")") 
  38. 38. //alert(obj.citys.length); 
  39. 39.  
  40. 40. for(var i=0;i<obj.citys.length;i++){ 
  41. 41.  
  42. 42.  
  43. 43. //产生一个option对象 
  44. 44. var opt=new Option(obj.citys[i].name,obj.citys[i].id); 
  45. 45. //添加到当前列表当中 
  46. 46. sel.add(opt,null); 
  47. 47.  
  48. 48. } 
  49. 49.  
  50. 50. } 
  51. 51.  
  52. 52.  
  53. 53. }  
  54. 54. //响应的结果直接放到对应的下拉菜单中 
  55. 55.  
  56. 56. } 
  57. 57.  
  58. 58. //加载所有的省份 
  59. 59. getArea("",'sheng') 
  60. 60. </script>  
1.	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.	<html xmlns="http://www.w3.org/1999/xhtml">
3.	<head>
4.	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5.	<title>无标题文档</title>
6.	</head>
7.	
8.	<body>
9.	
10.	<select id="sheng" onchange="getArea(this.value,'shi')" ></select> 省 <select id="shi" onchange="getArea(this.value,'xian')" ></select> 市 <select id="xian" ></select> 
11.	</body>
12.	</html>
13.	<script language="javascript" type="text/javascript">
14.	
15.	function getArea(id,p){
16.	
17.	//初始化ajax
18.	var xhr = new XMLHttpRequest();
19.	var url = "./area-json3.php?id="+id+"&r="+Math.random();
20.	var sel=document.getElementById(p);
21.	//打开请求
22.	xhr.open("get",url,true);
23.	
24.	//发送数据
25.	xhr.send(null);
26.	
27.	//等待响应
28.	xhr.onreadystatechange = function (){
29.	
30.	if(xhr.readyState == 4){
31.	
32.	var jsonstr=xhr.responseText;
33.	//alert(jsonstr);
34.	//清空下拉菜单
35.	sel.length=0;
36.	
37.	var obj=eval("("+jsonstr+")")
38.	//alert(obj.citys.length);
39.	
40.	for(var i=0;i<obj.citys.length;i++){
41.	
42.	
43.	//产生一个option对象
44.	var opt=new Option(obj.citys[i].name,obj.citys[i].id);
45.	//添加到当前列表当中
46.	sel.add(opt,null);
47.	
48.	}
49.	
50.	}
51.	
52.	
53.	} 
54.	//响应的结果直接放到对应的下拉菜单中
55.	
56.	}
57.	
58.	//加载所有的省份
59.	getArea("",'sheng')
60.	</script>

服务端代码：
[php] view plain copy print ?
  1. 1.  <?php 
  2. 2.  header("Content-Type:text/html;charset=UTF-8"); 
  3. 3.  //连接数据库 
  4. 4.  include("../include/dbconn.php"); 
  5. 5.  //根据用户返回的ID查询 
  6. 6.  $id=$_GET['id']; 
  7. 7.  $sql="select id,name from area where id like '".$id."__'"; 
  8. 8.  $rs=mysql_query($sql); 
  9. 9.  //将查询的结果封装成Json数据格式 
  10. 10.  
  11. 11. //$str= '{"ctiys":[{"id":"11","name":"北京"},{"id":"13","name":"河北"}]}'; 
  12. 12. //$arr= json_decode($str,true); //将字符串转换为json数组 
  13. 13. //echo $arr['ctiys'][1]['name']; 
  14. 14.  
  15. 15. //$arr2=array("aa"=>"张三","bb"=>123); 
  16. 16. //$str2= json_encode($arr2); //将数组转换为json字符串 
  17. 17. //echo $str2; 
  18. 18. //定义一个数组用于存放数据库中查询到得每一条数据 
  19. 19. $arr =array(); 
  20. 20. /*
  21. 21. 整体封装为这样的一个数组：
  22. 22. arr2(
  23. 23. 'cities'=>array(
  24. 24. 0=>array( 'id'=>'', 'name'=>'' )
  25. 25. 1=>array( 'id'=>11, 'name'=>'北京市' )
  26. 26. 2=>array( 'id'=>12, 'name'=>'天津市' )
  27. 27. ……
  28. 28. )
  29. 29. )
  30. 30. 这个数组转换为json字符串就成为这种形式：
  31. 31. {'cities':[{'id':'', 'name':''}, {'id':'11', 'name':'北京市'}, {'id':'12', 'name':'天津市'}, ……]}
  32. 32. 拼装为json对象obj后，就可以通过obj.cities[0].id等形式访问对应的值了
  33. 33. */ 
  34. 34.  
  35. 35. while($rows=mysql_fetch_assoc($rs)){ 
  36. 36. //构建一个二维数组，每一个元素是一个对象（一条记录）$arr将构建str的[{"id":"11","name":"北京"},{"id":"13","name":"河北"}]部分 
  37. 37. $arr[]= $rows; 
  38. 38. } 
  39. 39. //重新产生新的数组构建 $arr将构建{"ctiys":[{"id":"11","name":"北京"},{"id":"13","name":"河北"}]} 
  40. 40. $arr2 = array('citys'=>$arr); 
  41. 41. echo json_encode($arr2); 
  42. 42. ?> 
中国省市区三级联动实例（AJAX实现）
u014313879的专栏
11-09 1万+
本文利用ajax实现一个省市区三级联动示例
JS实现省市县三级联动
03-16
NULL 博文链接：https://newtime.iteye.com/blog/423585
AJAX实现省市区三级联动
12-28
使用AJAX从数据库中读取省、市、地区的数据，添加到select的option选项，实现自动筛选。
mysql省市区级联数据_Ajax实现省市区三级级联(数据来自mysql数据库)
weixin_31304499的博客
01-20 271
实现Ajax实现省市区三级级联，需要Java解析json技术整体Demo下载地址如下: 点我下载address.htmlInsert title here/*** 得到XMLHttpRequest对象*/function getajaxHttp() {var xmlHttp;try {// Firefox, Opera 8.0+, SafarixmlHttp = new XMLHttpReques...
省市区三级联动代码ajax,jquery+ajax实现省市区三级联动 （封装和不封装两种方式）...
weixin_42576186的博客
08-05 640
首先，要实现如下图效果，1、要理清思路：先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容，第三个同理。2、用到的数据库表：Chinastates表规律：根据国家级(中国)的areacode查询省级(如：北京) ; 根据省级的areacode查询市级(如：北京市辖)；根据市级的areacode查询区级(如东城区)第一种方式：没有用到封装，数据读取较慢，可以看看原理，...
PHP+Mysql+Ajax+JS实现省市区三级联动
10-25
省市区三级联动是一种常见的交互式界面设计，用于在电子商务、在线服务等领域中，根据用户选择的省份自动更新后续的城市和区县选项，使得用户可以更便捷地选择具体的地址信息。实现这一功能需要前端技术和后端技术的...
php+ajax+mysql省市县三级联动(1张数据库).zip
06-06
这个"php+ajax+mysql省市县三级联动"的资源提供了一个基于PHP、Ajax和MySQL实现的示例，它可以帮助初学者理解如何在实际项目中应用这些技术。以下是对这个资源涉及的知识点的详细解释： 1. **PHP**: PHP是一种广泛...
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
10-19
在本文中，我们将探讨如何使用PHP、MySQL、Ajax和jQuery来实现省市区三级联动的功能。这个功能常用于网站上的地址输入，用户可以根据选择的省份自动填充相应的城市和区县，提供更加流畅的用户体验。 首先，我们需要...
jquery+ajax实现省市区三级联动效果简单示例
10-20
总的来说，这个示例展示了如何使用jQuery和Ajax技术来实现动态的省市区三级联动。它利用了jQuery的简便API来处理DOM操作和Ajax请求，使得代码简洁易懂。在实际项目中，可以根据需要进行扩展，例如增加错误处理、优化...
js实现省市县三级联动
很努力学习知识的博客
11-06 1376
js–省市县联动 首先设置选择框 关键代码如下： 1.首先判断deptLevel字段为数字1-3时分别对应省市县 &amp;lt;td colspan=3&amp;gt; &amp;lt;!-- 管理员、部级、省级 --&amp;gt; &amp;lt;#if deptLevel lt 2&amp;gt; &amp;lt;!-- 市级 --&amp;gt;
Ajax+jQuery实现省市区三级联动功能
01-05
实现：省级下拉变化时市下拉区下拉跟着变化，市级下拉变化时区下拉跟着变化。
php 省市学校三级联动,thinkPHP实现的省市区三级联动功能示例
weixin_29220405的博客
03-09 321
本文实例讲述了thinkPHP实现的省市区三级联动功能。分享给大家供大家参考，具体如下：一张表实现省市区三级联动【3409条数据】1. php代码：public function index(){$province = M('Tree')->where ( array('pid'=>1) )->select ();$this->assign('province',$prov...
js 实现省市县三级联动
热门推荐
wujing1_1的博客
08-24 18万+
链接：样例百度云下载 提取码：fk6r 模板如下，下面的class 和 data-city 啥 的不能其他改变 ，div 里面也可以下其他东西，只需要包裹即可 注意点需要用到jquery ,使用的时候一定要引用 <!DOCTYPE html> <html lang="en"> <head> <meta charset=......
Ajax
sigarlin的博客
03-24 198
** Ajax知识点归纳 ** 1.Ajax是什么 “Asynchronous Javascript And XML”（异步JavaScript和XML） Ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。 1.使用CSS和XHTML来表示。 2.使用DOM模型来交互和动态显示。 3.使用XMLHttpRequest来和服务器进行异步通信。 4.使用javascript来绑...
php实现三级联动
yys3155的专栏
03-14 845
function getArea(val,table){ var xhr; if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); } var url = "ajax.php"
初识Ajax
买米当卡的博客
03-04 704
初识Ajax 一、同步交互和异步交互 举个例子：普通B/S模式(同步) AJAX技术(异步) 同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事 异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕 同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。 异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式 易懂的理解: 异步传输：你传输吧，我去做我的事了，传
Ajax(下)——＞实现省市区三级联动
yangyingjian123的博客
03-07 264
省市区三级联动 1、创建DB_Helper文件，连接数据库 import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; public class DBhelper { // 定义三个常量 1.数据库连接字符串 2.数据库的账号 3.连接数据库的密码 public static final String URL="jdbc:mysql://localhost:3306/t
Ajax实现省市区三级联动（JavaWeb）
不是七七子的博客
04-12 1771
先看下效果图： 项目结构： 1.准备数据库 表结构： 我把数据库、jquery和项目所用的jar包上传到了百度云盘，如果有需要可以下载。 链接：https://pan.baidu.com/s/1VijPG7LPeJoOHCa2mZsrww 提取码：fz86 先分析下数据库里面的数据，分析省份、城市、地区之间的联系。 分析ajax执行过程： ajax向服务器发送请求，Servlet接收ajax发来的请求，获取ajax传递的数据。服务器内部调用dao类，获取数据库中的数据，此时数据是Java对象或J
ajax 实现 省市区 三级联动
m0_57550795的博客
01-02 658
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>省市区三级联动</title> <style type="text/css"> select{ width: 200px; } </style> <scrip.
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值