Ajax（Asynchronous JavaScript and XML）是一種用于通過后臺與服務器進行異步數據交換的技術。通過Ajax，我們可以在不刷新整個頁面的情況下，更新頁面上的一部分內容。在網頁開發中，我們常常需要從后臺獲取列表類型的數據，并將其展示在頁面上供用戶選擇。本文將通過一個例子來演示如何使用Ajax獲取數據并用下拉框展示。 首先，我們假設我們有一個城市列表的數據庫，其中包含城市的名稱和對應的ID。我們希望在頁面上展示一個下拉框，讓用戶選擇一個城市，并根據用戶的選擇獲取該城市的詳細信息。 在前端代碼中，我們首先創建一個下拉框元素。

請選擇一個城市：

<select id="city-select" onchange="getCityInfo()">
<option value="" selected disabled>選擇城市</option>
</select>

在這段代碼中，我們為下拉框設置了一個id為"city-select"，并給其綁定了一個onchange事件，當用戶選擇了一個城市時，將會執行名為"getCityInfo()"的函數。 接下來，我們需要使用Ajax從后臺獲取城市列表數據，并將其填充到下拉框中。 首先，在JavaScript中編寫getCityInfo()函數。

function getCityInfo() {
var selectElement = document.getElementById("city-select");
var selectedCityId = selectElement.value;
if (selectedCityId !== "") {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var cityInfo = JSON.parse(xhr.responseText);
displayCityInfo(cityInfo);
}
};
xhr.open("GET", "/getCityInfo?id=" + selectedCityId, true);
xhr.send();
}
}

在這段代碼中，我們首先通過getElementById()方法獲取到了下拉框元素，并獲取到用戶選擇的城市ID。然后，我們創建了一個XMLHttpRequest對象，通過open()方法指定了請求的URL，這里假設后臺提供了一個名為"/getCityInfo"的接口用于根據城市ID獲取城市信息。接著，我們通過send()方法發送請求，并在readyState為4且status為200時，也就是請求成功時，解析返回的數據并調用displayCityInfo()函數進行展示。 最后，我們需要實現displayCityInfo()函數，用于將城市信息展示到頁面上。

function displayCityInfo(cityInfo) {
var cityInfoElement = document.getElementById("city-info");
var cityNameElement = document.createElement("p");
cityNameElement.innerText = "城市名：" + cityInfo.name;
var cityPopulationElement = document.createElement("p");
cityPopulationElement.innerText = "人口數量：" + cityInfo.population;
cityInfoElement.innerHTML = "";
cityInfoElement.appendChild(cityNameElement);
cityInfoElement.appendChild(cityPopulationElement);
}

在這段代碼中，我們首先通過getElementById()方法獲取到了用于展示城市信息的元素，然后創建了兩個

元素，分別用于展示城市名和人口數量。最后，我們使用appendChild()方法將這兩個元素添加到cityInfoElement中。 現在，當用戶選擇一個城市時，getCityInfo()函數將會根據用戶的選擇使用Ajax從后臺獲取城市信息，并將其展示在頁面上。 總結起來，通過Ajax獲取列表數據并用下拉框展示，涉及到了前端代碼和后臺數據接口的配合。前端代碼負責監測下拉框的選擇事件，發送請求獲取數據，并將數據展示到頁面上。后臺數據接口則負責根據請求參數返回相應的數據。通過這種方式，我們可以實現一個動態的下拉框，讓用戶方便地選擇并展示所需要的數據。 以上就是關于如何使用Ajax獲取列表數據并用下拉框展示的文章。 注意：本文的示例代碼僅為演示用途，并未考慮具體的后臺實現和數據庫連接等細節。實際應用中，需要根據具體情況進行相應的調整和完善。