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

最新推荐文章于 2022-11-27 14:15:18 发布

置顶 __GYT

最新推荐文章于 2022-11-27 14:15:18 发布

阅读量3.5k

点赞数

文章标签： ajax php xmlhttprequest json mysql 数据库

本文链接：https://blog.csdn.net/Oo__YAN/article/details/7024721

版权

实现省、市、县三级联动是一个最典型、最常用的一个ajax应用案例，当用户选择省的时候出现了该省的所有的市；当用户选择市的时候出现了该市所有的县，那么将怎样实现这样的三级联动的效果呢？我们不妨做个简单的分析:

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

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

	<!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" οnchange="getArea(this.value,'shi')" ></select> 省 <select id="shi" οnchange="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
 header("Content-Type:text/html;charset=UTF-8");

//连接数据库
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属性

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

客户端代码如下：

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对象，实现省市县 三级联动效果
客户端代码：

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" οnchange="getArea(this.value,'shi')" ></select> 省 <select id="shi" οnchange="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>

服务端代码：

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.	//将查询的结果封装成Json数据格式
10.	
11.	//$str= '{"ctiys":[{"id":"11","name":"北京"},{"id":"13","name":"河北"}]}';
12.	//$arr= json_decode($str,true); //将字符串转换为json数组
13.	//echo $arr['ctiys'][1]['name'];
14.	
15.	//$arr2=array("aa"=>"张三","bb"=>123);
16.	//$str2= json_encode($arr2); //将数组转换为json字符串
17.	//echo $str2;
18.	//定义一个数组用于存放数据库中查询到得每一条数据
19.	$arr =array();
20.	/*
21.	整体封装为这样的一个数组：
22.	arr2(
23.	'cities'=>array(
24.	0=>array( 'id'=>'', 'name'=>'' )
25.	1=>array( 'id'=>11, 'name'=>'北京市' )
26.	2=>array( 'id'=>12, 'name'=>'天津市' )
27.	……
28.	)
29.	)
30.	这个数组转换为json字符串就成为这种形式：
31.	{'cities':[{'id':'', 'name':''}, {'id':'11', 'name':'北京市'}, {'id':'12', 'name':'天津市'}, ……]}
32.	拼装为json对象obj后，就可以通过obj.cities[0].id等形式访问对应的值了
33.	*/
34.	
35.	while($rows=mysql_fetch_assoc($rs)){
36.	//构建一个二维数组，每一个元素是一个对象（一条记录）$arr将构建str的[{"id":"11","name":"北京"},{"id":"13","name":"河北"}]部分
37.	$arr[]= $rows;
38.	}
39.	//重新产生新的数组构建 $arr将构建{"ctiys":[{"id":"11","name":"北京"},{"id":"13","name":"河北"}]}
40.	$arr2 = array('citys'=>$arr);
41.	echo json_encode($arr2);
42.	?>

__GYT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PHP+Ajax三种方法实现省、市、县三级联动

实现省、市、县三级联动是一个最典型、最常用的一个ajax应用案例，当用户选择省的时候出现了该省的所有的市；当用户选择市的时候出现了该市所有的县，那么将怎样实现这样的三级联动的效果呢？我们不妨做个简单的分析: 想要实现省市县三级联动效果并不难，假设数据库中已经有一个地区的表了，里面存储所有的省市县的信息，实现思路： 1) 初始化所有的省份，这个可以直接从数据库中查询出
复制链接

扫一扫