本文將介紹如何利用Ajax實現下拉框的二級聯動，并結合SQL數據庫進行數據的獲取和更新。下拉框的二級聯動是指當第一個下拉框選擇了某個選項時，第二個下拉框的內容會根據第一個下拉框的選擇而更新，從而實現數據的動態展示。通過下面的例子，讀者可以更好地理解如何實現這個功能。

假設有一個網站要展示城市和該城市下的景點。首先，我們需要在數據庫中創建兩個表：City和Attraction。City表包含城市的信息，比如城市ID和城市名稱。Attraction表包含景點的信息，比如景點ID、景點名稱和所屬城市ID。

CREATE TABLE City (
city_id INT PRIMARY KEY,
city_name VARCHAR(50)
);
CREATE TABLE Attraction (
attraction_id INT PRIMARY KEY,
attraction_name VARCHAR(50),
city_id INT,
FOREIGN KEY (city_id) REFERENCES City (city_id)
);

接下來，我們需要在網頁上創建兩個下拉框，一個用于選擇城市，另一個用于展示該城市下的景點。首先，我們會通過Ajax向服務器請求城市數據，并將其填充到第一個下拉框中。

<select id="citySelect">
<option value="">請選擇城市</option>
</select>
<select id="attractionSelect">
<option value="">請選擇景點</option>
</select>

接下來，我們編寫JavaScript代碼來實現下拉框的二級聯動。首先，我們監聽頁面上的城市下拉框的change事件，并在事件觸發時向服務器發送Ajax請求，獲取該城市下的景點數據。

document.getElementById("citySelect").addEventListener("change", function() {
var city_id = this.value;
var attractionSelect = document.getElementById("attractionSelect");
// 清空景點下拉框的內容
attractionSelect.innerHTML = "<option value=''>請選擇景點</option>";
// 向服務器發送Ajax請求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理從服務器返回的數據
var attractions = JSON.parse(xhr.responseText);
// 將景點數據填充到第二個下拉框中
attractions.forEach(function(attraction) {
var option = document.createElement("option");
option.value = attraction.attraction_id;
option.textContent = attraction.attraction_name;
attractionSelect.appendChild(option);
});
}
};
xhr.open("GET", "getAttractions.php?city_id=" + city_id, true);
xhr.send();
});

在服務器端，我們編寫getAttractions.php文件來處理Ajax請求，并從數據庫中獲取對應城市的景點數據。在這個例子中，我們使用PHP來連接數據庫并執行SQL查詢。

$row["attraction_id"],
"attraction_name" =>$row["attraction_name"]
);
array_push($attractions, $attraction);
}
// 將結果轉換為JSON格式并輸出
echo json_encode($attractions);
// 關閉數據庫連接
mysqli_close($connection);
?>

通過以上代碼，我們實現了下拉框的二級聯動功能。當選擇了某個城市時，第二個下拉框會根據選擇的城市顯示對應的景點。通過使用Ajax和SQL數據庫，我們實現了數據的動態獲取和展示。

總結起來，通過使用Ajax實現下拉框的二級聯動可以提升用戶體驗，實現數據的動態加載和展示。在本文中，我們以城市和景點作為例子，展示了如何利用Ajax和SQL數據庫實現這個功能。