AJAX（Asynchronous JavaScript and XML）是一種前端技術，通過使用 JavaScript 和 XML 對服務器和客戶端進行異步通信，實現動態加載數據而無需刷新整個網頁。在二級聯動中，AJAX 可以非常方便地從數據庫中獲取數據，并實現多個下拉菜單之間的依賴關系。本文將介紹如何使用 AJAX 進行二級聯動，并通過詳細的舉例說明來演示其使用方法。

在這個例子中，我們有一個城市和一個區域的兩個下拉菜單。當用戶選擇一個城市時，區域的下拉菜單將根據所選城市的不同而改變內容。我們將通過 AJAX 從數據庫中獲取相應的區域數據，然后更新區域下拉菜單。

首先，我們需要在 HTML 中創建兩個下拉菜單，并為它們添加 ID：

<select id="city" onchange="getAreas()">
<option value="" selected disabled>請選擇城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
</select>
<select id="area">
<option value="" selected disabled>請選擇區域</option>
</select>

在上面的代碼中，我們為城市下拉菜單添加了一個 onchange 事件，當用戶選擇城市時，將觸發該事件，從而調用名為 getAreas() 的 JavaScript 函數來獲取相應的區域數據。

接下來，我們使用 JavaScript 來編寫 getAreas() 函數：

function getAreas() {
var cityId = document.getElementById("city").value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "getAreas.php?cityId=" + cityId, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var areas = JSON.parse(xhr.responseText);
var areaSelect = document.getElementById("area");
// 清空當前區域下拉菜單的選項
areaSelect.innerHTML = "";
// 添加新的區域選項
areas.forEach(function(area) {
var option = document.createElement("option");
option.value = area.id;
option.textContent = area.name;
areaSelect.appendChild(option);
});
}
};
xhr.send();
}

在上面的代碼中，我們首先獲取用戶選擇的城市 ID。然后，創建一個 XMLHttpRequest 對象，用于向服務器發送異步請求。通過使用 open() 方法，我們指定了請求的 URL，其中包括了城市 ID。在這個例子中，我們假設服務器端有一個名為 getAreas.php 的文件，用于處理該請求。

當服務器返回響應時，我們使用 JSON.parse() 方法將響應文本轉換為 JavaScript 對象。然后，我們獲取區域下拉菜單的 DOM 元素，并使用 innerHTML 屬性將其內容清空。接下來，我們通過遍歷 areas 數組，為每個區域創建一個新的 option 元素，并將其添加到區域下拉菜單中。

現在，我們需要在服務器端創建一個名為 getAreas.php 的文件，用于處理異步請求，并從數據庫中獲取相應的區域數據。以下是一個簡單的示例：

<?php
$cityId = $_GET["cityId"];
// 連接到數據庫
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "test";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("連接失敗：" . $conn->connect_error);
}
// 從數據庫獲取區域數據
$sql = "SELECT id, name FROM areas WHERE city_id = " . $cityId;
$result = $conn->query($sql);
$areas = [];
if ($result->num_rows >0) {
while($row = $result->fetch_assoc()) {
$area = [
"id" =>$row["id"],
"name" =>$row["name"]
];
array_push($areas, $area);
}
}
$conn->close();
// 將區域數據作為 JSON 格式返回
header("Content-Type: application/json");
echo json_encode($areas);
?>

在這個例子中，我們首先根據傳遞的城市 ID 連接到數據庫，并執行一個 SELECT 查詢，根據城市 ID 從 areas 表中獲取符合條件的區域數據。然后，我們將結果轉換為一個數組，并通過 JSON 格式返回給客戶端。

通過以上的代碼示例，我們可以實現一個基于數據庫的二級聯動。當用戶選擇一個城市時，區域的下拉菜單將自動更新，顯示相應的區域選項。這種方法可以在實際的應用中廣泛使用，幫助用戶快速選擇和填寫相關信息。