使用Ajax遍歷JSON數據

在Web開發中，經常需要從服務器獲取JSON數據，并在頁面上進行遍歷和顯示。Ajax（異步JavaScript和XML）是一種用于在后臺與服務器進行數據交換的技術，可以實現無需頁面刷新的數據更新。本文將介紹如何使用Ajax來獲取JSON數據，并遍歷它們進行展示。

通過Ajax獲取JSON數據

在使用Ajax獲取JSON數據之前，我們首先需要創建一個HTTP請求對象，然后通過該對象發送請求，并接收服務器返回的JSON數據。

var xmlhttp = new XMLHttpRequest(); // 創建HTTP請求對象
xmlhttp.onreadystatechange = function() { // 監聽請求狀態
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // 請求完成且成功返回
var json = JSON.parse(xmlhttp.responseText); // 解析JSON數據
// 處理JSON數據
}
};
xmlhttp.open("GET", "data.json", true); // 發送請求
xmlhttp.send();

上述代碼中，我們首先創建了一個XMLHttpRequest對象，然后通過onreadystatechange事件監聽請求狀態的改變。當請求成功返回且完成后（readyState為4，status為200），我們使用JSON.parse方法將返回的字符串解析為JSON對象。

遍歷JSON數據

獲取到JSON數據后，我們可以使用for循環或forEach方法遍歷其中的每個元素，并對其進行處理。

for (var i = 0; i < json.length; i++) {
var item = json[i]; // 獲取每個元素
// 處理item數據
document.write("<p>" + item.name + ": " + item.age + "歲</p>");
}

上述代碼中，我們使用for循環遍歷了json數組中的每個元素，并將每個元素的name和age屬性顯示在頁面上。你可以根據自己的需求對數據進行自定義處理，比如將數據顯示在表格中。

使用jQuery簡化操作

除了原生JavaScript，我們也可以使用jQuery來簡化Ajax請求和JSON數據的遍歷操作。

首先要確保已經引入了jQuery庫：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

使用jQuery的$.ajax方法發送Ajax請求，并在success回調函數中處理返回的JSON數據。

$.ajax({
url: "data.json",
type: "GET",
dataType: "json",
success: function(json) {
$.each(json, function(index, item) {
// 處理item數據
$("body").append("<p>" + item.name + ": " + item.age + "歲</p>");
});
}
});

上述代碼中，我們使用$.ajax方法發送GET請求，并將dataType設置為"json"，這樣jQuery會自動將返回的數據解析為JSON對象。在success回調函數中，我們使用$.each方法遍歷json對象的每個元素，并對其進行處理。

總結

通過本文的介紹，我們學習了如何使用Ajax來獲取JSON數據，并遍歷JSON對象進行展示。無論是使用原生JavaScript還是jQuery，都可以輕松地實現JSON數據的獲取和展示。希望本文能夠幫助你更好地理解和使用Ajax技術。