溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

ajax php實現(xiàn)三級聯(lián)動的方法

發(fā)布時間：2020-08-19 09:34:43 來源：億速云 閱讀：206 作者：小新 欄目：編程語言

小編給大家分享一下ajax php實現(xiàn)三級聯(lián)動的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

ajax php實現(xiàn)三級聯(lián)動的方法：首先創(chuàng)建一個test數(shù)據(jù)庫并創(chuàng)建三張表；然后初始化所有的省份；接著把當(dāng)前的省份id通過ajax發(fā)出請求傳遞到服務(wù)端的程序中；最后查詢數(shù)據(jù)庫并進行必要的處理顯示即可。

ajax php實現(xiàn)三級聯(lián)動的方法

案例涉及到數(shù)據(jù)庫，數(shù)據(jù)庫設(shè)計如下：

首先創(chuàng)建一個test數(shù)據(jù)庫，內(nèi)容如下：

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);

對數(shù)據(jù)庫說明：我創(chuàng)建了三張表，分別是?。╬rovince），市（city）,縣（county）,插入了幾條測試數(shù)據(jù)，當(dāng)然你也可以設(shè)計一張表，效率當(dāng)然沒一張表好，所以不建議使用，看你個人習(xí)慣。

實現(xiàn)過程并不是很難，思路如下：

     1) 初始化所有的省份，這個可以直接從數(shù)據(jù)庫中查詢出來省份
      2）當(dāng)用戶選擇省份的時候觸發(fā)事件，把當(dāng)前的省份的id通過ajax發(fā)出請求傳遞到服務(wù)端的程序中
      3）服務(wù)端根據(jù)客戶端的請求，查詢數(shù)據(jù)庫，并按照一定的格式返回給客戶端
      4）客戶端獲取服務(wù)端的數(shù)據(jù)，進行必要的處理顯示出來

創(chuàng)建select.php (代碼簡陋，只是實現(xiàn)功能而已，說明原理即可！)

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>三級聯(lián)動(作者：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>

創(chuàng)建selectPro.php頁面：

117 <?php
118 //禁止緩存(www.phpddt.com原創(chuàng))
119 header("Content-type:text/xml; charset=utf-8");
120 header("Cache-Control:no-cache");
121 //數(shù)據(jù)庫連接
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 ?>

看完了這篇文章，相信你對ajax php實現(xiàn)三級聯(lián)動的方法有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手