Maison >développement back-end >Problème PHP >Comment réaliser une liaison à trois niveaux en ajax php
Méthode Ajax PHP pour implémenter une liaison à trois niveaux : créez d'abord une base de données de test et créez trois tables ; puis initialisez toutes les provinces ; puis transmettez l'identifiant de la province actuelle au programme serveur via une requête ajax ; base de données et effectuer le traitement et l’affichage nécessaires.
Recommandé : "Tutoriel vidéo PHP"
Le cas implique une base de données, la conception d'une base de données Comme suit :
Créez d'abord une base de données test avec le contenu suivant :
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);
Instructions pour la base de données : j'ai créé trois tables, à savoir la province, la ville et le comté, et j'ai inséré plusieurs données de test. Bien sûr, vous pouvez également concevoir Bien sûr, l'efficacité. d'une table n'est pas aussi bonne que celle d'une table, il n'est donc pas recommandé de l'utiliser. Cela dépend de vos habitudes personnelles.
Le processus de mise en œuvre n'est pas difficile, l'idée est la suivante :
1) Initialiser toutes les provinces, cela peut être fait directement depuis la base de données Interroger la province
2) Lorsque l'utilisateur sélectionne une province, un événement est déclenché et la province actuelle id Émettez une demande via ajax et transmettez-la au programme serveur
3) Serveur Selon la demande du client, interroger la base de données et la renvoyer au client dans un certain format
4) Le client obtient les données du serveur et effectue les opérations nécessaires Le traitement est affiché
Créer select.php (Le code est simple, il implémente simplement la fonction, expliquez simplement le principe !)
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>
Créer selectPro.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 ?>
L'interface est la suivante :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!