ajax mysql三级联动

基础概念

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页应用能够快速地更新内容。

MySQL是一种关系型数据库管理系统，用于存储和管理数据。

三级联动通常指的是在网页上实现三个层级的数据选择，例如省、市、区的选择。当用户选择一个省时，市的数据会动态加载；选择市时，区的数据会动态加载。

类型

前端AJAX请求：通过JavaScript发起异步请求。
后端处理：服务器端处理请求并返回数据。
数据库查询：从MySQL数据库中查询数据。

应用场景

表单数据验证：在用户输入时实时验证数据。
动态内容加载：如三级联动选择框。
实时数据更新：如股票价格、天气预报等。

示例代码

前端AJAX请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动示例</title>
    <script>
        function loadCities(provinceId) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("city").innerHTML = xhr.responseText;
                }
            };
            xhr.open("GET", "get_cities.php?province_id=" + provinceId, true);
            xhr.send();
        }

        function loadDistricts(cityId) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("district").innerHTML = xhr.responseText;
                }
            };
            xhr.open("GET", "get_districts.php?city_id=" + cityId, true);
            xhr.send();
        }
    </script>
</head>
<body>
    <select id="province" onchange="loadCities(this.value)">
        <option value="">请选择省</option>
        <!-- 省的数据通过后端加载 -->
    </select>
    <select id="city" onchange="loadDistricts(this.value)">
        <option value="">请选择市</option>
    </select>
    <select id="district">
        <option value="">请选择区</option>
    </select>
</body>
</html>

后端PHP处理

<?php
// get_cities.php
$provinceId = $_GET['province_id'];
// 连接数据库
$conn = new mysqli("localhost", "username", "password", "database");
// 查询市的数据
$sql = "SELECT * FROM cities WHERE province_id = $provinceId";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "<option value='".$row["id"]."'>".$row["name"]."</option>";
    }
}
$conn->close();
?>