使用php+ajax实现三级联动

案例涉及到数据库,数据库设计如下:

首先创建一个test数据库,内容如下:

CREATE TABLE IF NOT EXISTS `province` (

  `province_id` int(2) NOT NULL AUTO_INCREMENT,

  `province_name` varchar(20) NOT NULL,

  PRIMARY KEY (`province_id`)

) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

 

INSERT INTO `province` (`province_id`, `province_name`) VALUES

(1, '安徽'),

(2, '浙江');

 

CREATE TABLE IF NOT EXISTS `city` (

  `city_id` int(4) NOT NULL AUTO_INCREMENT,

  `city_name` varchar(20) NOT NULL,

  `province_id` int(4) NOT NULL,

  PRIMARY KEY (`city_id`)

) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

 

INSERT INTO `city` (`city_id`, `city_name`, `province_id`) VALUES

(1, '合肥', 1),

(2, '安庆', 1),

(3, '南京', 2),

(4, '徐州', 2);

 

CREATE TABLE IF NOT EXISTS `county` (

  `county_id` int(4) NOT NULL AUTO_INCREMENT,

  `county_name` varchar(20) NOT NULL,

  `city_id` int(4) NOT NULL,

  PRIMARY KEY (`county_id`)

) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

 

INSERT INTO `county` (`county_id`, `county_name`, `city_id`) VALUES

(1, '怀宁', 2),

(2, '望江', 2),

(3, '肥东', 1),

(4, '肥西', 1);

对数据库说明:我创建了三张表,分别是省(province),市(city),县(county),插入了几条测试数据,当然你也可以设计一张表,效率当然没一张表好,所以不建议使用,看你个人习惯。

实现过程并不是很难,思路如下:

      1) 初始化所有的省份,这个可以直接从数据库中查询出来省份
      2)当用户选择省份的时候触发事件,把当前的省份的id通过ajax发出请求传递到服务端的程序中
      3)服务端根据客户端的请求,查询数据库,并按照一定的格式返回给客户端
      4)客户端获取服务端的数据,进行必要的处理显示出来

创建select.php (代码简陋,只是实现功能而已,说明原理即可!)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>三级联动(作者:mckee - www.phpddt.com)</title>

<meta http-equiv="content-type"content="text/html; charset=UTF-8"/>

<script>

function createAjax(){

var xmlHttp = false;

if (window.XMLHttpRequest){

10 xmlHttp = new XMLHttpRequest();

11 }else if(window.ActiveXObject){

12 try{

13 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

14 }catch(e){

15 try{

16 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

17 }catch(e){

18 xmlHttp = false;

19 }

20 }

21 }

22 return xmlHttp; 

23 }

24 

25 var ajax = null;

26 function getCity(province_id){

27 ajax = createAjax();

28 ajax.onreadystatechange=function(){

29 if(ajax.readyState == 4){

30 if(ajax.status == 200){ 

31 var cities = ajax.responseXML.getElementsByTagName("city");

32 $('city').length = 0;

33 var myoption = document.createElement("option");

34 myoption.value = "";

35 myoption.innerText = "--请选择城市--";

36 $('city').appendChild(myoption);

37 for(var i=0;i<cities.length;i++){

38 var city_id = cities[i].childNodes[0].childNodes[0].nodeValue;

39 var city_name = cities[i].childNodes[1].childNodes[0].nodeValue;

40 var myoption = document.createElement("option");

41 myoption.value = city_id;

42 myoption.innerText = city_name;

43 $('city').appendChild(myoption);

44 }

45 }

46 }

47 }

48  

49 ajax.open("post","selectPro.php",true);

50 ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

51 ajax.send("province_id="+province_id);

52  

53 }

54  

55 function getCounty(city_id){

56 ajax = createAjax();

57 ajax.onreadystatechange=function(){

58 if(ajax.readyState == 4){

59 if(ajax.status == 200){

60  

61 var cities = ajax.responseXML.getElementsByTagName("county");

62 $('county').length = 0;

63 var myoption = document.createElement("option");

64 myoption.value = "";

65 myoption.innerText = "--请选择县--";

66 $('county').appendChild(myoption);

67 for(var i=0;i<cities.length;i++){

68 var city_id = cities[i].childNodes[0].childNodes[0].nodeValue;

69 var city_name = cities[i].childNodes[1].childNodes[0].nodeValue;

70 var myoption = document.createElement("option");

71 myoption.value = city_id;

72 myoption.innerText = city_name;

73 $('county').appendChild(myoption);

74 }

75 }

76 }

77 }

78 ajax.open("post","selectPro.php",true);

79 ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

80 ajax.send("city_id="+city_id);

81 }

82  

83 function $(id){

84 return document.getElementById(id);

85 }

86  

87 </script>

88 </head> 

89 <body>

90 <form name="location">

91 <select name="province" onchange="getCity(this.value)">

92 <option value="">-- 请选择省份--</option>

93 <?php

94 $conn = mysql_connect("localhost","root","");

95 mysql_select_db("test");

96 mysql_query("set names utf8");

97 $sql = "select * from province"; 

98 $result = mysql_query( $sql ); 

99 while($res = mysql_fetch_assoc($result)){ 

100 ?> 

101 <option value="<?php echo $res['province_id']; ?>"><?php echo $res['province_name']?></option> 

102 <?php

103 } 

104 ?>

105 </select>

106  

107 <select name="city" id="city" onChange="getCounty(this.value)">

108 <option value="">--请选择城市--</option>

109 </select>

110  

111 <select name="county" id="county">

112 <option value="">--请选择县--</option>

113 </select>

114 </form>

115 </body>

116 </html>

创建selectPro.php页面:

117 <?php

118 //禁止缓存(www.phpddt.com原创)

119 header("Content-type:text/xml; charset=utf-8");

120 header("Cache-Control:no-cache");

121 //数据库连接

122 $conn = mysql_connect("localhost","root","");

123 mysql_select_db("test");

124 mysql_query("set names utf8");

125 

126 if(!empty($_POST['province_id'])){

127 

128 $province_id = $_POST['province_id'];

129 $sql = "select * from city where province_id = {$province_id}";

130 $query = mysql_query($sql);

131 $info = "<province>";

132 while($res = mysql_fetch_assoc($query)){

133 $info .= "<city>";

134 $info .= "<city_id>".$res['city_id']."</city_id>";

135 $info .= "<city_name>".$res['city_name']."</city_name>";

136 $info .= "</city>";

137 }

138 $info .= "</province>";

139 echo $info;

140 }

141 

142 if(!empty($_POST['city_id'])){

143 

144 $city_id = $_POST['city_id'];

145 $sql = "select * from county where city_id = {$city_id}";

146 $query = mysql_query($sql);

147 $info = "<city>";

148 while($res = mysql_fetch_assoc($query)){

149 $info .= "<county>";

150 $info .= "<county_id>".$res['county_id']."</county_id>";

151 $info .= "<county_name>".$res['county_name']."</county_name>";

152 $info .= "</county>";

153 }

154 $info .= "</city>";

155 echo $info;

156 }

157 ?>

界面如下:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值