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

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

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

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

  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" ο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-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. getArea("",'sheng'
  42. </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&#
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值