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

最新推荐文章于 2024-08-20 11:45:38 发布

SANGLIU

最新推荐文章于 2024-08-20 11:45:38 发布

阅读量1.3w

点赞数 5

分类专栏： IT 文章标签： AJAX PHP json mysql 数据库

本文链接：https://blog.csdn.net/sangliu/article/details/8674886

版权

本文介绍了使用PHP和Ajax实现省市县三级联动的三种不同方法。第一种方法是服务器返回HTML代码，但在IE下存在兼容性问题。第二种方法是服务器返回自定义字符串，客户端通过拆分字符串来实现效果。第三种方法是服务器返回Json数据，客户端解析Json并动态生成下拉选项，这种方法兼容性更好。

摘要由CSDN通过智能技术生成

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

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

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

[php] view plain copy print ?

<!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>

	<!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&#