php ajax三级联动

基础概念

PHP AJAX三级联动是指通过PHP后端处理数据，并结合AJAX技术在前端实现三个层级（通常是省、市、区/县）的动态联动选择。用户在选择上一级选项时，下一级选项会动态更新，从而提供更好的用户体验。

类型

静态数据：预先定义好的数据，通常存储在数据库或JSON文件中。
动态数据：根据用户的选择或其他条件动态生成的数据。

应用场景

地址选择：如省市区选择。
分类选择：如商品分类、行业分类等。
时间选择：如年、月、日的选择。

示例代码

PHP后端（处理数据）

<?php
// 假设这是从数据库获取的数据
$provinces = [
    ['id' => 1, 'name' => '广东省'],
    ['id' => 2, 'name' => '湖南省'],
];

$cities = [
    ['id' => 1, 'province_id' => 1, 'name' => '广州市'],
    ['id' => 2, 'province_id' => 1, 'name' => '深圳市'],
    ['id' => 3, 'province_id' => 2, 'name' => '长沙市'],
];

$areas = [
    ['id' => 1, 'city_id' => 1, 'name' => '天河区'],
    ['id' => 2, 'city_id' => 1, 'name' => '越秀区'],
    ['id' => 3, 'city_id' => 2, 'name' => '南山区'],
];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $province_id = $_POST['province_id'] ?? 0;
    $city_id = $_POST['city_id'] ?? 0;

    if ($province_id) {
        $selected_cities = array_filter($cities, function ($city) use ($province_id) {
            return $city['province_id'] == $province_id;
        });
    } else {
        $selected_cities = [];
    }

    if ($city_id) {
        $selected_areas = array_filter($areas, function ($area) use ($city_id) {
            return $area['city_id'] == $city_id;
        });
    } else {
        $selected_areas = [];
    }

    echo json_encode([
        'provinces' => $provinces,
        'cities' => $selected_cities,
        'areas' => $selected_areas,
    ]);
}
?>

HTML前端（AJAX请求）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <select id="province" name="province">
        <option value="">请选择省</option>
    </select>
    <select id="city" name="city">
        <option value="">请选择市</option>
    </select>
    <select id="area" name="area">
        <option value="">请选择区/县</option>
    </select>

    <script>
        $(document).ready(function() {
            $.ajax({
                url: 'your_php_file.php',
                type: 'POST',
                success: function(data) {
                    var provinces = data.provinces;
                    $.each(provinces, function(index, province) {
                        $('#province').append($('<option>', {
                            value: province.id,
                            text: province.name
                        }));
                    });

                    $('#province').change(function() {
                        var province_id = $(this).val();
                        $.ajax({
                            url: 'your_php_file.php',
                            type: 'POST',
                            data: { province_id: province_id },
                            success: function(data) {
                                var cities = data.cities;
                                $('#city').empty().append($('<option>', {
                                    value: '',
                                    text: '请选择市'
                                }));
                                $.each(cities, function(index, city) {
                                    $('#city').append($('<option>', {
                                        value: city.id,
                                        text: city.name
                                    }));
                                });

                                $('#city').change();
                            }
                        });
                    });

                    $('#city').change(function() {
                        var city_id = $(this).val();
                        $.ajax({
                            url: 'your_php_file.php',
                            type: 'POST',
                            data: { city_id: city_id },
                            success: function(data) {
                                var areas = data.areas;
                                $('#area').empty().append($('<option>', {
                                    value: '',
                                    text: '请选择区/县'
                                }));
                                $.each(areas, function(index, area) {
                                    $('#area').append($('<option>', {
                                        value: area.id,
                                        text: area.name
                                    }));
                                });
                            }
                        });
                    });
                }
            });
        });
    </script>
</body>
</html>