ajax php实现三级联动的方法：首先创建一个test数据库并创建三张表；然后初始化所有的省份；接着把当前的省份id通过ajax发出请求传递到服务端的程序中；最后查询数据库并进行必要的处理显示即可。
推荐：《PHP视频教程》
案例涉及到数据库，数据库设计如下：
首先创建一个test数据库，内容如下：
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);
对数据库说明：我创建了三张表，分别是省（province），市（city）,县（county）,插入了几条测试数据，当然你也可以设计一张表，效率当然没一张表好，所以不建议使用，看你个人习惯。
实现过程并不是很难，思路如下：
1) 初始化所有的省份，这个可以直接从数据库中查询出来省份
2）当用户选择省份的时候触发事件，把当前的省份的id通过ajax发出请求传递到服务端的程序中
3）服务端根据客户端的请求，查询数据库，并按照一定的格式返回给客户端
4）客户端获取服务端的数据，进行必要的处理显示出来
创建select.php (代码简陋，只是实现功能而已，说明原理即可！)
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>创建selectPro.php页面：
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 ?>界面如下：
以上是ajax php如何实现三级联动的详细内容。更多信息请关注PHP中文网其他相关文章！
声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
酸与基本数据库：差异和何时使用。Mar 26, 2025 pm 04:19 PM本文比较了酸和基本数据库模型，详细介绍了它们的特征和适当的用例。酸优先确定数据完整性和一致性，适合财务和电子商务应用程序，而基础则侧重于可用性和
PHP安全文件上传：防止与文件相关的漏洞。Mar 26, 2025 pm 04:18 PM本文讨论了确保PHP文件上传的确保，以防止诸如代码注入之类的漏洞。它专注于文件类型验证，安全存储和错误处理以增强应用程序安全性。
PHP API率限制：实施策略。Mar 26, 2025 pm 04:16 PM本文讨论了在PHP中实施API速率限制的策略，包括诸如令牌桶和漏水桶等算法，以及使用Symfony/Rate-limimiter之类的库。它还涵盖监视，动态调整速率限制和手
php密码哈希：password_hash和password_verify。Mar 26, 2025 pm 04:15 PM本文讨论了使用password_hash和pyspasswify在PHP中使用密码的好处。主要论点是，这些功能通过自动盐，强大的哈希算法和SECH来增强密码保护
OWASP前10 php：描述并减轻常见漏洞。Mar 26, 2025 pm 04:13 PM本文讨论了OWASP在PHP和缓解策略中的十大漏洞。关键问题包括注射，验证损坏和XSS，并提供用于监视和保护PHP应用程序的推荐工具。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
刺客信条阴影：贝壳谜语解决方案
3 周前ByDDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前ByDDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前ByDDD
<🎜>：死铁路 - 如何完成所有挑战
4 周前ByDDD
Atomfall指南：项目位置，任务指南和技巧
1 个月前ByDDD
热工具
SublimeText3汉化版
中文版，非常好用
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
SublimeText3 Linux新版
SublimeText3 Linux最新版
WebStorm Mac版
好用的JavaScript开发工具
mPDF
mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），
