ajax php如何实现三级联动

ajax php实现三级联动的方法：首先创建一个test数据库并创建三张表；然后初始化所有的省份；接着把当前的省份id通过ajax发出请求传递到服务端的程序中；最后查询数据库并进行必要的处理显示即可。

推荐：《PHP视频教程》 

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

首先创建一个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 (代码简陋，只是实现功能而已，说明原理即可！)

1 nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">2 3 4 5 6 7 function createAjax(){8 var xmlHttp = false;9 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 88  89 90 

登录后复制115 116 

创建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 = "";132 while($res = mysql_fetch_assoc($query)){133 $info .= "";134 $info .= "".$res['city_id']."";135 $info .= "".$res['city_name']."";136 $info .= "";137 }138 $info .= "";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 = "";148 while($res = mysql_fetch_assoc($query)){149 $info .= "";150 $info .= "".$res['county_id']."";151 $info .= "".$res['county_name']."";152 $info .= "";153 }154 $info .= "";155 echo $info;156 }157 ?>

登录后复制

界面如下：

以上就是ajax php如何实现三级联动的详细内容，更多请关注【创想鸟】其它相关文章！