在現代的網頁開發中，經常會遇到需要根據用戶輸入動態獲取數據并顯示在頁面上的情況。Ajax技術的出現使這個過程變得更加便捷和高效。其中，使用Ajax獲取并顯示數據列表是一種常見的需求。本文將介紹使用Ajax獲取數據列表的過程，以及如何處理和展示這些數據。通過舉例說明，我們可以清晰地看到數據列表的結果出來的效果。

1. 準備工作

在使用Ajax獲取數據列表之前，我們首先需要準備好相關的HTML元素和CSS樣式。例如，我們可以在頁面上創建一個搜索框和一個顯示結果的列表容器：

<input id="searchInput" type="text" placeholder="請輸入關鍵詞">
<ul id="resultList"></ul>

接下來，我們需要編寫一些JavaScript代碼來實現Ajax請求。以jQuery為例，可以使用其提供的$.ajax方法發起異步請求：

$('#searchInput').on('input', function() {
var keyword = $(this).val();
$.ajax({
url: 'data.php', // 后端接口地址
data: { keyword: keyword },
dataType: 'json',
success: function(data) {
// 處理返回的數據
}
});
});

2. 處理返回的數據

當服務端返回數據后，我們需要在success回調函數中對數據進行處理。首先，可以清空之前的結果列表，并遍歷返回的數據來創建新的列表項：

success: function(data) {
$('#resultList').empty();
data.forEach(function(item) {
var listItem = '<li>' + item.name + '</li>';
$('#resultList').append(listItem);
});
}

上述代碼中，我們遍歷了返回的數據數組，為每個數據項創建一個li元素，并將數據項的name屬性作為li元素的文本內容。然后，將li元素添加到結果列表中。

3. 展示數據列表

最后，我們需要將數據列表展示在頁面上。為了美化列表樣式，我們可以通過CSS來設置一些樣式效果：

#resultList li {
padding: 10px;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
}
#resultList li:last-child {
border-bottom: none;
}

通過上述CSS代碼，我們為結果列表的每個li元素設置了一定的內邊距和背景顏色，并為列表中的最后一個li元素去除了下邊框。

經過上述步驟，我們就成功地實現了根據用戶輸入動態獲取數據并顯示在頁面上的功能。通過Ajax技術，我們可以異步獲取數據，提升頁面的加載速度和用戶的體驗。

舉個例子，我們可以想象一個在線商城的搜索功能。當用戶在搜索框中輸入關鍵詞時，頁面會自動發起Ajax請求，根據關鍵詞從服務端獲取對應的商品列表，并將列表顯示在頁面上。用戶可以實時看到搜索結果，并根據自己的需求進行篩選和選擇。

總之，使用Ajax獲取數據列表是非常實用且常見的網頁開發技術。通過動態獲取數據并實時顯示在頁面上，我們可以提升用戶體驗，使網頁更具交互性和實用性。