AJAX是一種用于創建交互式網頁應用程序的技術，它可以實現網頁實時更新，無需刷新整個頁面。在實際應用中，經常會有級聯下拉框的需求，即一個下拉框的選項依賴于另一個下拉框的選項，這時我們可以利用AJAX從數據庫中獲取數據來實現級聯下拉框的功能。本文將以一個城市和區縣的級聯選擇為例，介紹如何使用AJAX從數據庫中取值的方法。

在HTML中，我們需要定義兩個下拉框，一個用于選擇城市，另一個用于選擇區縣。當用戶選擇了城市后，區縣的下拉框應當動態更新，顯示該城市下的所有區縣。我們將通過AJAX從數據庫中獲取城市和區縣的數據，然后將數據動態填充到下拉框中。

<select id="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
</select>
<select id="district">
<option value="">請選擇</option>
</select>

在javascript中，我們需要監聽城市下拉框的變化事件，當用戶選擇了一個城市后，我們通過AJAX發送請求到服務器，獲取該城市下的所有區縣數據，并將數據填充到區縣的下拉框中。

document.getElementById("city").addEventListener("change", function() {
var cityId = this.value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var districts = JSON.parse(xhr.responseText);
var districtSelect = document.getElementById("district");
districtSelect.innerHTML = "";
for (var i = 0; i < districts.length; i++) {
var option = document.createElement("option");
option.value = districts[i].id;
option.text = districts[i].name;
districtSelect.appendChild(option);
}
}
};
xhr.open("GET", "/api/district?cityId=" + cityId, true);
xhr.send();
});

在這段代碼中，我們首先獲取到用戶選擇的城市ID，然后創建一個XMLHttpRequest對象，發送GET請求到服務器的API接口。服務器返回的數據是一個包含所有區縣的JSON數組，我們將其解析為JavaScript對象，然后動態創建option元素，設置option的值和文本，最后將option添加到區縣的下拉框中。

通過以上的代碼邏輯，當用戶選擇了城市后，區縣的下拉框將會實時更新，顯示該城市下的所有區縣。例如，用戶選擇了北京，區縣的下拉框將顯示該城市下的所有區縣，如朝陽區、海淀區等。用戶選擇了上海，區縣的下拉框將顯示該城市下的所有區縣，如黃浦區、徐匯區等。

總結來說，使用AJAX從數據庫取值可以實現級聯下拉框的功能，使得頁面實時更新，提升用戶體驗。在實際開發中，我們可以根據需求從數據庫中獲取各種不同的數據，并將其填充到相應的下拉框中，實現自定義的級聯效果。