Comment réaliser une liaison à trois niveaux en ajax php-Problème PHP-php.cn

Comment réaliser une liaison à trois niveaux en ajax php

藏色散人

Libérer： 2023-03-04 17:36:01

original

1916 Les gens l'ont consulté

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.

Comment réaliser une liaison à trois niveaux en ajax php

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, &#39;安徽&#39;),
(2, &#39;浙江&#39;);
 
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, &#39;合肥&#39;, 1),
(2, &#39;安庆&#39;, 1),
(3, &#39;南京&#39;, 2),
(4, &#39;徐州&#39;, 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, &#39;怀宁&#39;, 2),
(2, &#39;望江&#39;, 2),
(3, &#39;肥东&#39;, 1),
(4, &#39;肥西&#39;, 1);

Copier après la connexion

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 $(&#39;city&#39;).length = 0;
33 var myoption = document.createElement("option");
34 myoption.value = "";
35 myoption.innerText = "--请选择城市--";
36 $(&#39;city&#39;).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 $(&#39;city&#39;).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 $(&#39;county&#39;).length = 0;
63 var myoption = document.createElement("option");
64 myoption.value = "";
65 myoption.innerText = "--请选择县--";
66 $(&#39;county&#39;).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 $(&#39;county&#39;).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[&#39;province_id&#39;]; ?>"><?php echo $res[&#39;province_name&#39;]?></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>

Copier après la connexion

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[&#39;province_id&#39;])){
127 
128 $province_id = $_POST[&#39;province_id&#39;];
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[&#39;city_id&#39;]."</city_id>";
135 $info .= "<city_name>".$res[&#39;city_name&#39;]."</city_name>";
136 $info .= "</city>";
137 }
138 $info .= "</province>";
139 echo $info;
140 }
141 
142 if(!empty($_POST[&#39;city_id&#39;])){
143 
144 $city_id = $_POST[&#39;city_id&#39;];
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[&#39;county_id&#39;]."</county_id>";
151 $info .= "<county_name>".$res[&#39;county_name&#39;]."</county_name>";
152 $info .= "</county>";
153 }
154 $info .= "</city>";
155 echo $info;
156 }
157 ?>

Copier après la connexion

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!