PHP+Ajax三种方法实现省市县三级联动
实现省、市、县三级联动是一个最典型、最常用的一个ajax应用案例，当用户选择省的时候出现了该省的所有的市；当用户选择市的时候出现了该市所有的县，那么将怎样实现这样的三级联动的效果呢？我们不妨做个简单的分析:
想要实现省市县三级联动效果并不难，假设数据库中已经有一个地区的表了，里面存储所有的省市县的信息，实现思路：
1) 初始化所有的省份，这个可以直接从数据库中查询出来省份
2）当用户选择省份的时候触发事件，把当前的省份的id通过ajax发出请求传递到服务端的程序中
3）服务端根据客户端的请求，查询数据库，并按照一定的格式返回给客户端
4）客户端获取服务端的数据，进行必要的处理显示出来
服务端的程序根据id查询后，把结果可以封装成多种格式，比如：html 、特殊字符串、Json格式等，下面我们来看下每一种格式都是如何实现的：
第一种：服务端返回 html格式的情况
客户端请求页面：
第二种方法实现起来比较容易理解，而且能够兼容IE和火狐 ，如果新手的话建议使用此种方法
第三种 ：服务器端返回Json数据格式，客户端解析Json产生Json对象，实现省市县三级联动效果
客户端代码：
服务端代码：
想要实现省市县三级联动效果并不难，假设数据库中已经有一个地区的表了，里面存储所有的省市县的信息，实现思路：
1) 初始化所有的省份，这个可以直接从数据库中查询出来省份
2）当用户选择省份的时候触发事件，把当前的省份的id通过ajax发出请求传递到服务端的程序中
3）服务端根据客户端的请求，查询数据库，并按照一定的格式返回给客户端
4）客户端获取服务端的数据，进行必要的处理显示出来
服务端的程序根据id查询后，把结果可以封装成多种格式，比如：html 、特殊字符串、Json格式等，下面我们来看下每一种格式都是如何实现的：
第一种：服务端返回 html格式的情况
客户端请求页面：
- "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- "http://www.w3.org/1999/xhtml">
- "Content-Type" content="text/html; charset=gb2312" />
3G开发者联盟-ajax-html.html - οnchange="getArea(this.value,'shi')" > 省 市
3G开发者联盟-ajax-html.html
省 市
服务端返回html标签代码：
- 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 "";
- while($rows=mysql_fetch_assoc($rs)){
- echo '.$rows['id'].'\'>'.$rows['name'].'';
- }
- ?>
//连接数据库
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 "";
while($rows=mysql_fetch_assoc($rs)){
echo '';
}
?>
上述效果火狐下没有问题，但是服务器返回html代码的弊端是 document.getElementById(p).innerHTML = xhr.responseText;这句话在IE下有问题，IE不识别下拉菜单的innerHTML属性
第二种：服务器返回 自定义的 字符串 客户端通过 拆分字符串实现效果
客户端代码如下：
- 1.
- 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 "";
- 12. echo ":";
- 13. while($rows=mysql_fetch_assoc($rs)){
- 14.
- 15. echo ';'.$rows['id'].':'.$rows['name'];
- 16.
- 17. }
- 18.
- 19. ?>
1. 请选择";
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. "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 2. "http://www.w3.org/1999/xhtml">
- 3.
- 4. "Content-Type" content="text/html; charset=gb2312" />
- 5.
无标题文档 - 6.
- 7.
- 8.
- 9.
- 10. οnchange="getArea(this.value,'shi')" > 省 市
- 11.
- 12.
- 13.
1.
2.
3.
4.
5. 无标题文档
6.
7.
8.
9.
10. 省 市
11.
12.
13.
服务端代码：
- 1.
- 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. ?>