ajax巧妙实现省、市、县的三级联动

前端之家收集整理的这篇文章主要介绍了ajax巧妙实现省、市、县的三级联动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

二级联动和三级联动的效果在web上很常见,在网上查了半天资料,写的都不是很清楚,无奈,自己写了个,使用PHP+ajax实现三级联动,以最常见的省市县三级联动为例!

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

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

CREATETABLEIFNOTEXISTS`province`(

`province_id`int(2)NOTNULLAUTO_INCREMENT,

`province_name`varchar(20)NOTNULL,255)">PRIMARYKEY(`province_id`)

)ENGINE=InnoDBDEFAULTCHARSET=utf8AUTO_INCREMENT=3;

INSERTINTO`province`(`province_id`,`province_name`)VALUES

(1,'安徽'),255)">(2,'浙江');

CREATETABLEIFNOTEXISTS`city`(

`city_id`int(4)NOTNULLAUTO_INCREMENT,255)">`city_name`varchar(20)NOTNULL,255)">`province_id`int(4)NOTNULL,255)">PRIMARYKEY(`city_id`)

)ENGINE=InnoDBDEFAULTCHARSET=utf8AUTO_INCREMENT=5;

INSERTINTO`city`(`city_id`,`city_name`,`province_id`)VALUES

(3,'南京',2),255)">(4,'徐州',2);

CREATETABLEIFNOTEXISTS`county`(

`county_id`int(4)NOTNULLAUTO_INCREMENT,255)">`county_name`varchar(20)NOTNULL,255)">`city_id`int(4)NOTNULL,255)">PRIMARYKEY(`county_id`)

INSERTINTO`county`(`county_id`,`county_name`,`city_id`)VALUES

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

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

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

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

1<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

2<html>

3<head>

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

5<Metahttp-equiv="content-type"content"text/html;charset=UTF-8"/>

6<script>

7functioncreateAjax(){

8varxmlHttp=false;

9if(window.XMLHttpRequest){

10xmlHttp=newXMLHttpRequest();

11}elseifActiveXObject12try{

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

14}catch(e){

15try{

16xmlHttp=newActiveXObject("Microsoft.XMLHTTP");

17catche18xmlHttp=false;

19}

20}

2122returnxmlHttp;

23}

24

25varajaxnull;

26functiongetCity(province_id){

27();

28ajax.onreadystatechange=function(){

29.readyState==430if(ajax.status==200){

31citiesresponseXMLgetElementsByTagName"city"32$('city').length=0;

33myoptiondocumentcreateElement"option"34myoption.value="";

35innerText"--请选择城市--"36$('city').appendChild(myoption);

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

38varcity_id=cities[i].childNodes[0].childNodes[0].nodeValue;

39city_name[].childNodes[1nodeValue40varmyoption=document.createElement("option");

41valuecity_id42myoption.innerText=city_name;

43$'city').appendChild44}

4546}

4748

49open"post","selectPro.PHP"true50ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

51send"province_id="+province_id52

5354

55getCounty56ajax=createAjax();

57onreadystatechange=function58if(ajax.readyState==4){

59status20060

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

6364myoption.value="";

65"--请选择县--"66$('county').appendChild(myoption);

6768varcity_id=cities[i].childNodes[0].childNodes[0].nodeValue;

6970varmyoption=document.createElement("option");

7172myoption.innerText=city_name;

73'county'74}

7576}

7778ajax.open("post","selectPro.PHP",true);

79setRequestHeader"Content-Type""application/x-www-form-urlencoded"80ajax.send("city_id="+city_id);

8182

83id84returndocument.getElementById(id);

8586

87</script>

88</head>

89<body>

90<formname="location">

91<selectname"province"onchange"getCitythis)">

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

93<?PHP

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

95MysqL_select_db"test"96MysqL_query("setnamesutf8");

97$sql"select*fromprovince"

98$result=MysqL_query($sql);

99while$resMysqL_fetch_assoc$result)){100?>

101<optionvalue="PHPecho$res['province_id'];?>">'province_name']?></option>102<?PHP

103}104?>

105</select>

106

107"city"onChange108<optionvalue="">--请选择城市--</option>

109110

111"county""county"112<optionvalue="">--请选择县--</option>

113114</form>

115</body>

116</html>

selectPro.PHP页面

117118//禁止缓存(www.PHPddt.com原创)

119header"Content-type:text/xml;charset=utf-8"120header("Cache-Control:no-cache");

121//数据库连接

122$conn=MysqL_connect("localhost",255)">123124MysqL_query("setnamesutf8");

125

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

127

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

129"select*fromcitywhereprovince_id={$province_id}"130$query=MysqL_query($sql);

131$info"<province>"132while($res=MysqL_fetch_assoc($query)){

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

135"<city_name>"'city_name']."</city_name>"136$info.="</city>";

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

139echo$info140}

141

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

143

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

145"select*fromcountywherecity_id={$city_id}"146$query=MysqL_query($sql);

147148while($res=MysqL_fetch_assoc($query)){

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

151"<county_name>"'county_name'"</county_name>"152$info.="</county>";

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

155156}

157?>

界面如下:

代码在IE测试正常,欢迎大家提出建议和批评!

欢迎转载!原文地址:http://www.phpddt.com/php/769.html,转载请注明地址,谢谢!

原文链接:https://www.f2er.com/ajax/166673.html

猜你在找的Ajax相关文章