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

發(fā)布時間：2020-08-19 09:34:43

來源：億速云

閱讀：106

作者：小新

小編給大家分享一下ajax php實現(xiàn)三級聯(lián)動的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！ajax php實現(xiàn)三級聯(lián)動的方法：首先創(chuàng)建一個test數(shù)據(jù)庫并創(chuàng)建三張表；然后初始化所有的省份；接著把當前的省份id通過ajax發(fā)出請求傳遞到服務端的程序中；最后查詢數(shù)據(jù)庫并進行必要的處理顯示即可。

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

首先創(chuàng)建一個test數(shù)據(jù)庫，內容如下：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)建了三張表，分別是省(province)，市(city),縣(county),插入了幾條測試數(shù)據(jù)，當然你也可以設計一張表，效率當然沒一張表好，所以不建議使用，看你個人習慣。

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

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

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

2

3

4

三級聯(lián)動(作者：mckee - www.phpddt.com)

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

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

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

91

92 -- 請選擇省份--

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 <?php echo $res['province_name']?>

102 <?php

103 }

104 ?>

105

106

107

108 --請選擇城市--

109

110

111

112 --請選擇縣--

113

114

115

116

創(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 = "";

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實現(xiàn)三級聯(lián)動的方法有了一定的了解，想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！

總結

以上是生活随笔為你收集整理的php原生态三级联动_ajax php实现三级联动的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。