在現代的網頁開發中，用戶體驗是至關重要的一環。而一個常見的用戶需求就是通過一個網頁快速地獲取一組數據，并且在網頁上實時展示出來。這就涉及到了Ajax（Asynchronous JavaScript and XML）的應用。Ajax能夠無需刷新整個頁面，通過在后臺與服務器進行少量的數據交換，實現網頁的部分更新。在這篇文章中，我們將討論如何使用Ajax傳遞一個列表（List）并將其展示在網頁上。通過一系列的舉例和代碼演示，您將了解到如何利用Ajax的強大功能來提高用戶體驗。
假設我們正在開發一個在線購物網站，用戶可以通過點擊不同的商品類別來獲取相應類別的商品列表。使用Ajax，我們可以實現在用戶點擊類別時僅傳遞選定類別的商品列表數據，而不是整個頁面的刷新。假設我們有一個服務器資源`/api/products`，當我們通過Ajax發送一個GET請求到該資源的時候，它將返回這個類別的商品列表。下面是一個使用jQuery和Ajax的例子：
```javascript
$.ajax({
url: '/api/products',
type: 'GET',
data: { category: 'electronic' },
success: function(response) {
// 在這里處理服務器返回的商品列表
}
});
```
在這個例子中，我們通過Ajax發送一個GET請求到`/api/products`資源，并傳遞了`category`參數，值為`'electronic'`，表示我們想要獲取電子類別的商品列表。當服務器成功響應后，我們可以在`success`回調函數中處理返回的商品列表數據。
接下來，我們需要根據返回的商品列表數據來更新網頁上的顯示。可以通過使用jQuery的`append()`方法或其他類似的方法來在網頁上動態添加商品元素。下面是一個簡單的例子：
```javascript
success: function(response) {
var productList = response.products;
var $productContainer = $('#product-container');
productList.forEach(function(product) {
var $productElement = $('
');
$productElement.append('');
$productElement.append('
' + product.name + '
'); $productElement.append('' + product.price + '
'); $productContainer.append($productElement); }); } ``` 在這個例子中，我們首先獲取到返回的商品列表數據，然后創建一個父容器`$productContainer`，該容器的id為`product-container`，通過使用`forEach()`方法遍歷商品列表，創建一個包含商品信息的``元素，并將其添加到父容器中。
通過上述例子，我們可以清楚地看到，通過使用Ajax傳遞一個列表數據，并在網頁上實時展示出來，我們可以提高用戶的瀏覽體驗。用戶無需刷新整個頁面，只需點擊按鈕或鏈接，就能夠快速地獲取到所需的數據。同時，由于只更新了部分內容，網頁的加載速度也得到了顯著的提升。
總之，Ajax的強大功能使得傳遞和展示列表數據成為了一種簡單高效的方式，適用于各種網頁應用場景。無論是在線購物網站，還是社交媒體平臺，都可以通過Ajax使網頁更加動態、實時，為用戶提供更好的體驗。