使用Ajax可以通過發送HTTP請求獲取JSON數據,然后將數據顯示在網頁上。以下是一個使用Ajax獲取JSON數據并顯示的示例:
// 創建一個XMLHttpRequest對象
var xmlhttp = new XMLHttpRequest();
// 設置請求的類型和URL
xmlhttp.open("GET", "data.json", true);
// 設置回調函數,處理響應結果
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
// 請求成功,解析JSON數據
var data = JSON.parse(this.responseText);
// 顯示數據
displayData(data);
}
};
// 發送請求
xmlhttp.send();
// 顯示數據的函數
function displayData(data) {
// 在頁面上創建一個<ul>元素
var ul = document.createElement("ul");
// 遍歷數據,創建<li>元素,并將數據顯示在<li>元素中
for (var i = 0; i < data.length; i++) {
var li = document.createElement("li");
li.textContent = data[i].name + " - " + data[i].age;
ul.appendChild(li);
}
// 將<ul>元素添加到頁面中
document.body.appendChild(ul);
}
在這個示例中,我們使用XMLHttpRequest
對象發送GET請求,請求的URL是"data.json"。當請求的狀態改變時,會觸發onreadystatechange
事件,我們在該事件處理函數中判斷請求的狀態和響應的狀態碼是否成功。如果成功,我們使用JSON.parse()
方法解析響應的JSON數據,并將解析后的數據傳遞給displayData()
函數進行顯示。
displayData()
函數創建一個<ul>
元素,然后遍歷數據,創建<li>
元素,并將數據顯示在<li>
元素中,最后將<ul>
元素添加到頁面中。
需要注意的是,如果你的數據不是來自同源的服務器(即數據的域名和網頁的域名不一致),你需要在服務器端設置CORS(跨域資源共享)來允許跨域請求。