Ajax 是一種在網(wǎng)頁(yè)中以異步方式與服務(wù)器通信的技術(shù)，可以在不刷新整個(gè)頁(yè)面的情況下更新頁(yè)面的一部分內(nèi)容。而 JSON（JavaScript Object Notation）是一種用于存儲(chǔ)和傳輸數(shù)據(jù)的輕量級(jí)數(shù)據(jù)交換格式，經(jīng)常與 Ajax 一同使用。本文將介紹如何通過(guò) Ajax 循環(huán)輸出 JSON 數(shù)組的內(nèi)容，并舉例說(shuō)明其使用方法。
以一個(gè)簡(jiǎn)單的例子來(lái)展示如何使用 Ajax 循環(huán)輸出 JSON 數(shù)組。假設(shè)我們有一個(gè)名為 books.json 的文本文件，其中包含了一個(gè)書籍?dāng)?shù)組。每個(gè)書籍都有一個(gè)“title”和“author”字段。我們的目標(biāo)是使用 Ajax 獲取 books.json 文件，并將每個(gè)書籍的標(biāo)題顯示在頁(yè)面上。
我們首先需要在頁(yè)面上創(chuàng)建一個(gè)用于顯示書籍標(biāo)題的元素。例如，我們可以在頁(yè)面的
標(biāo)簽中添加一個(gè)具有“book-title”類的html
<div id="output"></div>
<script>
// 創(chuàng)建一個(gè)用于發(fā)送 Ajax 請(qǐng)求的函數(shù)
function loadJSON(callback) {
var xhr = new XMLHttpRequest();
xhr.overrideMimeType("application/json");
xhr.open('GET', 'books.json', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
callback(xhr.responseText);
}
};
xhr.send(null);
}
// 使用 Ajax 請(qǐng)求來(lái)獲取 JSON 數(shù)據(jù)，并在頁(yè)面上循環(huán)顯示書籍標(biāo)題
loadJSON(function (response) {
var books = JSON.parse(response);
var output = document.getElementById('output');
for (var i = 0; i < books.length; i++) {
var book = books[i];
var title = book.title;
var p = document.createElement('p');
p.innerHTML = title;
output.appendChild(p);
}
});
</script>在上面的代碼中，我們首先定義了一個(gè)名為 loadJSON 的函數(shù)，該函數(shù)用于發(fā)送 Ajax 請(qǐng)求來(lái)獲取 books.json 文件中的數(shù)據(jù)。該函數(shù)接受一個(gè)回調(diào)函數(shù)作為參數(shù)，在成功獲取數(shù)據(jù)后將調(diào)用該回調(diào)函數(shù)，并將響應(yīng)文本作為參數(shù)傳遞給它。在回調(diào)函數(shù)中，我們首先將響應(yīng)文本解析為一個(gè) JavaScript 對(duì)象（即 books 數(shù)組），然后使用循環(huán)來(lái)遍歷該數(shù)組。對(duì)于每個(gè)書籍，我們創(chuàng)建一個(gè)新的中。
以上就是如何使用 Ajax 循環(huán)輸出 JSON 數(shù)組的基本示例。通過(guò)該示例，我們可以在頁(yè)面上顯示 books.json 文件中所有書籍的標(biāo)題。請(qǐng)注意，我們?cè)谶@個(gè)例子中使用的 books.json 文件必須與我們的頁(yè)面位于同一個(gè)域，否則可能會(huì)遇到跨域問(wèn)題。
總結(jié)來(lái)說(shuō)，通過(guò) Ajax 循環(huán)輸出 JSON 數(shù)組非常方便，只需使用一些簡(jiǎn)單的 JavaScript 代碼即可實(shí)現(xiàn)。我們只需要發(fā)送一個(gè) Ajax 請(qǐng)求來(lái)獲取 JSON 數(shù)據(jù)，然后將其解析為 JavaScript 對(duì)象，并使用循環(huán)遍歷該對(duì)象來(lái)處理每個(gè)元素。通過(guò)這種方式，我們可以動(dòng)態(tài)地在頁(yè)面上顯示 JSON 數(shù)據(jù)，并根據(jù)需要執(zhí)行其他操作。