在web开发中，省级联动是非常常见的功能之一。例如，在一个地址填写表单中，用户需要先选择自己所在的省份，然后再根据所选省份的城市数据进行选择。这种功能的实现主要依赖于前端技术和后端技术之间的协同配合。在本篇文章中，我们将介绍如何使用php和ajax技术实现省级联动功能。
- 准备工作
在使用PHP和AJAX实现省级联动之前，我们需要准备一些必要的工作。首先，我们需要一个城市数据库。这个数据库包含了所有的省份、城市和县区的数据。这个数据库可以是MySQL、Oracle、MSSQL Server等。在本篇文章中，我们使用的是MySQL数据库。
除此之外，我们还需要一些前端技术，例如HTML、CSS、和Javascript。这些技术可以帮助我们构建交互性强的用户界面。在这个用户界面中，用户可以通过下拉菜单选择自己所在的省份和城市。
- 构建城市数据库
在创建城市数据库之前，我们需要设计一下这个数据库的数据结构。主要包含如下的数据表：
- 省份表(province): 包含省份id和省份名称字段；
- 城市表(city)：包含城市id、城市名称和省份id字段；
- 县区表(area)：包含县区id、县区名称和城市id字段。
使用如下的SQL语句创建表格：
立即学习“PHP免费学习笔记（深入）”；
-- 省份表
CREATE TABLE province (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- 城市表
CREATE TABLE city (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL,
province_id int(11) NOT NULL,
PRIMARY KEY (id),
KEY province_id (province_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- 县区表
CREATE TABLE area (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(50) NOT NULL,
city_id int(11) NOT NULL,
PRIMARY KEY (id),
KEY city_id (city_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
把城市数据导入到这三个表格中，我们就可以开始构建PHP代码了。
- 构建省级联动代码
以下是PHP代码实现的流程：
- 当用户选择了一个省份（通过下拉菜单方式），AJAX代码将所选的省份id发送到后端服务器；
- 后端服务器接收到省份id后，查询数据库返回该省份所属的城市列表；
- AJAX代码将城市列表更新到前端页面上，让用户可以继续选择城市。
按照上述流程，我们可以编写如下的PHP代码：
- province.php
<?php
// 获取所有省份信息
$conn = mysqli_connect("localhost", "root", "password", "test");
$sql = "SELECT id, name FROM province ORDER BY id ASC";
$result = mysqli_query($conn, $sql);
$provinceArray = array();
while ($row = mysqli_fetch_assoc($result)) {
array_push($provinceArray, $row);
}
mysqli_close($conn);
// 输出省份信息
echo json_encode($provinceArray, JSON_UNESCAPED_UNICODE);
?>- city.php
<?php
// 获取所选省份对应的城市信息
$provinceId = $_GET['provinceId'];
$conn = mysqli_connect("localhost", "root", "password", "test");
$sql = "SELECT id, name FROM city WHERE province_id=$provinceId ORDER BY id ASC";
$result = mysqli_query($conn, $sql);
$cityArray = array();
while ($row = mysqli_fetch_assoc($result)) {
array_push($cityArray, $row);
}
mysqli_close($conn);
// 输出城市信息
echo json_encode($cityArray, JSON_UNESCAPED_UNICODE);
?>- area.php
<?php
// 获取所选城市对应的县区信息
$cityId = $_GET['cityId'];
$conn = mysqli_connect("localhost", "root", "password", "test");
$sql = "SELECT id, name FROM area WHERE city_id=$cityId ORDER BY id ASC";
$result = mysqli_query($conn, $sql);
$areaArray = array();
while ($row = mysqli_fetch_assoc($result)) {
array_push($areaArray, $row);
}
mysqli_close($conn);
// 输出县区信息
echo json_encode($areaArray, JSON_UNESCAPED_UNICODE);
?>这里我们使用了mysqli连接数据库，使用前需要将上述代码中的"localhost"、"root"和"password"替换成相应的主机名、用户名和密码。同时，我们也需要将数据库名称测试成相应的数据库。
- 构建前端界面
在构建前端界面中，我们主要需要使用HTML、CSS和Javascript技术。以下是省级联动在前端实现的主要步骤：
- 定义两个下拉菜单：一个用于选择省份，另一个用于选择城市；
- 当用户选择了一个省份之后，向后端服务器发送请求获取该省份对应的城市列表；
- 更新城市下拉列表，让用户可以继续选择城市。
以下是实现的HTML和Javascript代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省级联动</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<select id="provinceSelect">
<option value="">请选择省份</option>
</select>
<select id="citySelect">
<option value="">请选择城市</option>
</select>
<select id="areaSelect">
<option value="">请选择县区</option>
</select>
<script>
$(document).ready(function () {
// 页面加载时获取所有省份信息
$.ajax({
url: 'province.php',
type: 'GET',
dataType: 'json',
success: function (data) {
// 循环添加省份列表
$.each(data, function (i, item) {
$('#provinceSelect').append('<option value="' + item.id + '">' + item.name + '</option>');
});
}
});
// 当用户选择省份时获取该省份对应的城市信息
$('#provinceSelect').change(function () {
// 获取所选省份的id
var provinceId = $(this).val();
// 清空城市列表和县区列表
$('#citySelect').empty().append('<option value="">请选择城市</option>');
$('#areaSelect').empty().append('<option value="">请选择县区</option>');
// 如果没有选择省份，则不处理
if (provinceId === '') {
return false;
}
// 发送AJAX请求获取所选省份对应的城市列表
$.ajax({
url: 'city.php',
type: 'GET',
dataType: 'json',
data: { provinceId: provinceId },
success: function (data) {
// 循环添加城市列表
$.each(data, function (i, item) {
$('#citySelect').append('<option value="' + item.id + '">' + item.name + '</option>');
});
}
});
});
// 当用户选择城市时获取该城市对应的县区信息
$('#citySelect').change(function () {
// 获取所选城市的id
var cityId = $(this).val();
// 清空县区列表
$('#areaSelect').empty().append('<option value="">请选择县区</option>');
// 如果没有选择城市，则不处理
if (cityId === '') {
return false;
}
// 发送AJAX请求获取所选城市对应的县区列表
$.ajax({
url: 'area.php',
type: 'GET',
dataType: 'json',
data: { cityId: cityId },
success: function (data) {
// 循环添加县区列表
$.each(data, function (i, item) {
$('#areaSelect').append('<option value="' + item.id + '">' + item.name + '</option>');
});
}
});
});
});
</script>
</body>
</html>在页面运行后，用户就可以通过下拉列表选择自己的省份和城市了。当用户选择了省份之后，会自动发送AJAX请求获取城市列表；当用户选择了城市之后，会自动发送AJAX请求获取县区列表。一切都在无须任何页面跳转的情况下完成，用户体验性非常好。
至此，我们已经成功地实现了PHP和AJAX实现省级联动的功能。同时也感受到了前后端技术的密切协同，为用户带来更好的使用体验。
