本文將介紹如何使用Ajax獲取數據并將數據填充到下拉列表中。Ajax是一種用于創建快速動態網頁的技術，它可以在不刷新整個頁面的情況下向服務器請求數據。下拉列表是一種常見的網頁元素，用戶可以從中選擇一個選項。通過使用Ajax，我們可以動態地將從服務器獲取的數據填充到下拉列表中，從而為用戶提供更好的用戶體驗。

假設我們有一個省份的下拉列表，用戶可以從中選擇一個省份。當用戶選擇一個省份時，我們希望能夠獲取該省份下面的城市列表，并將城市列表填充到第二個下拉列表中。首先，我們需要在HTML代碼中創建兩個下拉列表，一個用于顯示省份，另一個用于顯示城市：

<select id="province">
<option value="0">請選擇省份</option>
</select>
<select id="city">
<option value="0">請選擇城市</option>
</select>

接下來，我們需要編寫一個JavaScript函數，該函數將在用戶選擇省份時被調用。該函數將使用Ajax來向服務器發送請求，并從服務器獲得城市數據。我們可以使用XMLHttpRequest對象來創建一個Ajax請求：

function getCities() {
var provinceId = document.getElementById("province").value;
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置回調函數，當請求完成時調用
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 當請求成功時，將獲取到的城市數據填充到城市下拉列表中
var cities = JSON.parse(xhr.responseText);
var citySelect = document.getElementById("city");
// 清空城市下拉列表中的選項
citySelect.innerHTML = "";
// 將獲取到的城市數據填充到城市下拉列表中
for (var i = 0; i < cities.length; i++) {
var option = document.createElement("option");
option.value = cities[i].id;
option.text = cities[i].name;
citySelect.appendChild(option);
}
}
};
// 發送Ajax請求
xhr.open("GET", "/api/cities?provinceId=" + provinceId, true);
xhr.send();
}

在上述代碼中，我們首先獲取用戶選擇的省份的ID。然后，我們創建一個XMLHttpRequest對象，設置了一個回調函數，當請求完成時將被調用。在回調函數中，我們首先將從服務器獲取的城市數據解析為JavaScript對象，并獲取到城市下拉列表的元素。接下來，我們清空城市下拉列表中的選項，并將獲取到的城市數據填充到下拉列表中。最后，我們通過調用open()方法設置請求的URL和方法，然后發送Ajax請求。

最后，我們只需要在HTML代碼中將getCities()函數與省份下拉列表的onchange事件綁定：

<select id="province" onchange="getCities()">
<option value="0">請選擇省份</option>
</select>

當用戶選擇一個省份時，getCities()函數將被調用，并從服務器獲取相應省份下面的城市列表，并將城市列表填充到第二個下拉列表中。通過使用Ajax，我們可以實現動態獲取數據并將數據填充到下拉列表中，為用戶提供更好的用戶體驗。