php省市县三级联动,PHP+Ajax三种方法兑现省市县三级联动

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

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

想要实现省市县三级联动效果并不难,假设数据库中已经有一个地区的表了,里面存储所有的省市县的信息,实现思路:

1) 初始化所有的省份,这个可以直接从数据库中查询出来省份

2)当用户选择省份的时候触发事件,把当前的省份的id通过ajax发出请求传递到服务端的程序中

3)服务端根据客户端的请求,查询数据库,并按照一定的格式返回给客户端

4)客户端获取服务端的数据,进行必要的处理显示出来

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

第一种:服务端返回 html格式的情况

客户端请求页面:

[php]view plaincopyprint?

/p>

"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3G开发者联盟-ajax-html.html

id="shi"οnchange="getArea(this.value,'xian')">

functiongetArea(id,p){

//初始化ajax

varxhr =newXMLHttpRequest();

varurl ="./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')

3G开发者联盟-ajax-html.html

省 市

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')

服务端返回html标签代码:

[php]view plaincopyprint?

header("Content-Type:text/html;charset=UTF-8");

header("Content-Type:text/html;charset=UTF-8");

[php]view plaincopyprint?

//连接数据库

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['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 ''.$rows['name'].'';

}

?>

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

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

客户端代码如下:

[php]view plaincopyprint?

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 "请选择";

12. echo

":";

13. while($rows=mysql_fetch_assoc($rs)){

14.

15. echo';'.$rows['id'].':'.$rows['name'];

16.

17. }

18.

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 "请选择";

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 plaincopyprint?

1. 

2. 

3. 

4. 

5. 

无标题文档

6. 

7.

8. 

9.

10. 省

11.

12.

13.

14.

15. functiongetArea(id,p){

16.

17. //初始化ajax

18. varxhr =newXMLHttpRequest();

19. varurl ="./area-json3.php?id="+id+"&r="+Math.random();

20. varsel=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. varjsonstr=xhr.responseText;

33. //alert(jsonstr);

34. //清空下拉菜单

35. sel.length=0;

36.

37. varobj=eval("("+jsonstr+")")

38. //alert(obj.citys.length);

39.

40. for(vari=0;i

41.

42.

43. //产生一个option对象

44. varopt=newOption(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.

1.

2.

3.

4.

5.

无标题文档

6.

7.

8.

9.

10. 省 市

11.

12.

13.

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

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.

服务端代码:

[php]view plaincopyprint?

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. echojson_encode($arr2);

42. ?>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值