在現代Web開發中，我們經常會遇到需要從后臺獲取數據的需求。而Ajax（異步JavaScript和XML）是一種用于在不刷新整個頁面的情況下從服務器獲取數據的技術。在這篇文章中，我們將重點討論如何通過Ajax獲取后臺傳來的JSON集合數據。 假設我們正在開發一個電子商務網站，我們需要從后臺獲取商品列表的JSON數據，以便在網頁上顯示。使用Ajax非常適合這種場景，因為它可以在用戶瀏覽網頁的同時異步加載數據，提高頁面的響應速度。 首先，我們需要創建一個JavaScript函數來執行Ajax請求。我們使用jQuery庫來簡化代碼。在以下示例中，我們將使用jQuery的$.ajax()函數來發送一個GET請求：

function getProducts() {
$.ajax({
url: 'backend.php',
type: 'GET',
dataType: 'json',
success: function(response) {
// 這里是處理響應數據的代碼
}
});
}

在上面的代碼中，我們指定了請求的URL（在這個例子中是backend.php），設置請求類型為GET，同時指定期望的響應數據類型為JSON。通過傳入一個成功回調函數，我們可以在獲取到響應數據后執行一些動作。 接下來，我們需要在成功回調函數中處理響應數據。假設后臺返回的JSON數據如下所示：

[
{
"id": 1,
"name": "商品1",
"price": 9.99
},
{
"id": 2,
"name": "商品2",
"price": 19.99
},
{
"id": 3,
"name": "商品3",
"price": 29.99
}
]

為了在網頁上顯示這些商品信息，我們可以遍歷這個JSON數組，并將每個商品的名稱和價格添加到網頁的某個元素中。以下是一個簡單的示例：

success: function(response) {
var productsDiv = $('#products');
for (var i = 0; i < response.length; i++) {
var product = response[i];
var productHtml = '<p>商品名稱：' + product.name + '，價格：' + product.price + '</p>';
productsDiv.append(productHtml);
}
}

在上面的代碼中，我們首先使用jQuery的$()函數獲取到一個帶有id為products的元素，并將其存儲在productsDiv變量中。然后，我們遍歷響應數據中的每個商品對象，為每個商品創建一個包含名稱和價格的HTML字符串，并將其追加到productsDiv元素中。 通過以上步驟，我們已經成功地使用Ajax獲取后臺傳來的JSON集合，并在網頁上顯示了商品列表。這個例子只是一個簡單的示例，實際應用中可能會更加復雜。但是基本的原理和代碼模式是相似的。 總結起來，通過Ajax獲取后臺傳來的JSON集合非常簡單。我們只需要使用jQuery的$.ajax()函數發送一個GET請求，并通過成功回調函數處理響應數據。然后，我們可以根據需求使用這些數據在網頁上做一些動態的操作，比如顯示商品列表、搜索結果等。無論是開發電子商務網站還是其他類型的應用，Ajax都能夠提高用戶體驗，為用戶提供更加流暢的交互。