php怎么用ajax实现省级联动-PHP问题-PHP中文网

php怎么用ajax实现省级联动

PHPz

发布： 2023-03-29 10:11:18

原创

663人浏览过

在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代码了。

Grammarly

Grammarly是一款在线语法纠正和校对工具，伟大的AI辅助写作工具

253

查看详情

构建省级联动代码

以下是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实现省级联动的功能。同时也感受到了前后端技术的密切协同，为用户带来更好的使用体验。

以上就是php怎么用ajax实现省级联动的详细内容，更多请关注php中文网其它相关文章！