使用Ajax獲取JSON數據并遍歷是在Web開發中經常遇到的任務之一。通過Ajax獲取JSON數據可以使網頁在不刷新的情況下更新數據，同時使用遍歷技術可以將獲取的數據展示在頁面上。本文將介紹如何使用Ajax獲取JSON數據并通過遍歷展示在頁面上，同時通過舉例說明其實際應用。
首先，讓我們看一個簡單的例子來了解如何使用Ajax獲取JSON數據。假設有一個存儲了用戶信息的JSON文件，我們需要通過Ajax獲取這些用戶信息并展示在頁面上。以下是獲取JSON數據的代碼：

$.ajax({
url: 'user.json', // JSON文件的URL地址
type: 'GET', // 請求方式為GET
dataType: 'json', // 返回的數據格式為json
success: function(data) { // 請求成功時處理
// 對獲取的數據進行遍歷
$.each(data, function(index, item){
// 展示數據在頁面上
$('body').append('<p>用戶名：' + item.name + '，年齡：' + item.age + '</p>');
});
},
error: function(xhr, type, errorThrown) { // 請求失敗時處理
console.log(xhr);
console.log(type);
console.log(errorThrown);
}
});

在上述代碼中，我們使用了jQuery的$.ajax方法來發送請求，指定了請求的URL地址、請求方式、數據格式以及成功和失敗時的處理函數。在成功的處理函數中，我們使用了$.each方法對獲取的數據進行遍歷，然后將每個用戶的姓名和年齡展示在頁面上。這樣，我們就成功地獲取了JSON數據并通過遍歷展示在頁面上。
接下來，讓我們看一個實際的應用場景：動態加載商品列表。假設我們有一個存儲了多個商品信息的JSON文件，我們需要通過Ajax獲取這些商品信息并展示在頁面上。以下是獲取JSON數據的代碼：

$.ajax({
url: 'goods.json', // JSON文件的URL地址
type: 'GET', // 請求方式為GET
dataType: 'json', // 返回的數據格式為json
success: function(data) { // 請求成功時處理
// 對獲取的數據進行遍歷
$.each(data, function(index, item){
// 創建商品卡片并展示在頁面上
var card = '<div class="card">' +
'' +
'<h3>' + item.name + '</h3>' +
'<p>價格：' + item.price + '</p>' +
'</div>';
$('.goods-list').append(card);
});
},
error: function(xhr, type, errorThrown) { // 請求失敗時處理
console.log(xhr);
console.log(type);
console.log(errorThrown);
}
});

在上述代碼中，我們通過遍歷JSON數據創建了多個商品卡片，并將其展示在頁面上。每個商品卡片包括商品圖片、商品名稱和價格信息。通過動態加載商品列表，我們可以實現在不刷新頁面的情況下更新商品信息，提高用戶體驗。
通過以上兩個例子，我們了解了如何使用Ajax獲取JSON數據并遍歷展示在頁面上。無論是展示用戶信息還是商品列表，我們都可以通過這種方式實現動態加載和更新數據。相信隨著實踐的深入，你將在Web開發中更加靈活地應用Ajax和遍歷技術。