php ajax二级联动

基础概念

PHP和AJAX二级联动是指在一个网页中，通过AJAX技术异步请求服务器数据，并使用PHP处理这些数据，从而实现两个或多个下拉菜单（或其他选择控件）之间的联动效果。通常，第一个下拉菜单的选择会触发AJAX请求，PHP服务器处理请求并返回数据，然后JavaScript更新第二个下拉菜单的内容。

类型

基于数据库的联动：从数据库中查询数据并返回给前端。
基于文件的联动：从服务器上的文件中读取数据并返回。
基于API的联动：调用外部API获取数据。

应用场景

地区选择：例如选择国家后，自动加载对应的省份或城市。
产品分类：选择一个大类后，自动显示该类别下的子类别或产品。
日期选择：选择开始日期后，自动更新结束日期的范围。

示例代码

PHP部分（处理AJAX请求）

<?php
// 假设我们有一个数据库连接
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 获取前端传递的参数
$selectedCategory = $_POST['category'];

// 根据选择的类别查询子类别
$sql = "SELECT subcategory FROM subcategories WHERE category = '$selectedCategory'";
$result = $conn->query($sql);

$subcategories = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $subcategories[] = $row['subcategory'];
    }
}

// 返回JSON格式的数据
header('Content-Type: application/json');
echo json_encode($subcategories);

$conn->close();
?>

HTML和JavaScript部分

<!DOCTYPE html>
<html>
<head>
    <title>PHP AJAX 二级联动示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<select id="category">
    <option value="category1">类别1</option>
    <option value="category2">类别2</option>
    <!-- 其他类别 -->
</select>

<select id="subcategory">
    <!-- 子类别将通过AJAX动态加载 -->
</select>

<script>
$(document).ready(function(){
    $('#category').change(function(){
        var category = $(this).val();
        $.ajax({
            url: 'get_subcategories.php', // PHP处理文件
            type: 'POST',
            data: { category: category },
            success: function(data) {
                var subcategorySelect = $('#subcategory');
                subcategorySelect.empty(); // 清空现有选项
                $.each(data, function(index, subcategory) {
                    subcategorySelect.append($('<option>', { 
                        value: subcategory,
                        text : subcategory 
                    }));
                });
            }
        });
    });
});
</script>

</body>
</html>