Home > Article > Backend Development > How to implement three-level linkage in ajax php
Ajax PHP method to implement three-level linkage: first create a test database and create three tables; then initialize all provinces; then pass the current province ID to the server program through an ajax request; finally Just query the database and perform necessary processing and display.
Recommended: "PHP Video Tutorial"
The case involves database and database design As follows:
First create a test database with the following content:
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);
Description of the database: I created three tables, namely province, city, and county, and inserted several test data. Of course, you can also design Of course, the efficiency of a table is not as good as that of a table, so it is not recommended to use it. It depends on your personal habits.
The implementation process is not difficult, the idea is as follows:
1) Initialize all provinces, this can be done directly from the database Query the province
2) When the user selects a province, an event is triggered and the id of the current province is triggered. Issuing a request through ajax and passing it to the server program
3) Server According to the client's request, query the database and return it to the client in a certain format
## 4) The client obtains the data from the server and performs necessary The processing is displayed
Createselect.php (The code is simple, it just implements the function, just explain the principle!)
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>三级联动(作者:mckee - www.phpddt.com)</title> 5 <meta http-equiv="content-type"content="text/html; charset=UTF-8"/> 6 <script> 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 </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>
CreateselectPro.phpPage:
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 ?>
The interface is as follows:
The above is the detailed content of How to implement three-level linkage in ajax php. For more information, please follow other related articles on the PHP Chinese website!