在Web開發(fā)中，我們經(jīng)常需要從服務(wù)器獲取數(shù)據(jù)并在網(wǎng)頁上展示。AJAX（Asynchronous JavaScript and XML）技術(shù)為我們提供了一種實現(xiàn)異步數(shù)據(jù)交互的方式。使用AJAX，我們可以通過發(fā)送HTTP請求到服務(wù)器，獲取JSON格式的數(shù)據(jù)，并將這些數(shù)據(jù)解析并展示在網(wǎng)頁上。本文將介紹如何使用AJAX獲取JSON數(shù)據(jù)的值，并通過舉例說明來幫助讀者更好地理解。
首先，讓我們來看一個簡單的例子。假設(shè)我們有一個服務(wù)器端API，能夠返回一個包含學(xué)生姓名和分?jǐn)?shù)的JSON數(shù)據(jù)。我們可以通過AJAX發(fā)送一個HTTP GET請求到該API，并將返回的JSON數(shù)據(jù)解析出學(xué)生的姓名和分?jǐn)?shù)，并在網(wǎng)頁上展示出來。
html
<script>
function getStudentData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/api/student", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var student = JSON.parse(xhr.responseText);
var name = student.name;
var score = student.score;
// 在此處進(jìn)行展示操作，例如：
var output = document.getElementById("output");
output.innerHTML = "學(xué)生姓名：" + name + "<br>學(xué)生分?jǐn)?shù)：" + score;
}
};
xhr.send();
}
</script>
<button onclick="getStudentData()">獲取學(xué)生數(shù)據(jù)</button>
<p id="output"></p>在上面的代碼中，我們定義了一個名為getStudentData()的函數(shù)，該函數(shù)用來發(fā)送AJAX請求并處理返回的JSON數(shù)據(jù)。首先，我們創(chuàng)建了一個XMLHttpRequest對象，并使用open()方法指定了我們需要發(fā)送的GET請求的URL。然后，我們定義了一個onreadystatechange函數(shù)，該函數(shù)在AJAX請求的狀態(tài)發(fā)生改變時被觸發(fā)。當(dāng)狀態(tài)碼為4（請求已完成）且請求的狀態(tài)為200（成功）時，我們通過JSON.parse()方法將返回的JSON數(shù)據(jù)解析為JavaScript對象。接下來，我們獲取了學(xué)生的姓名和分?jǐn)?shù)，并將它們展示在網(wǎng)頁上。
我們使用一個按鈕來觸發(fā)getStudentData()函數(shù)，這樣當(dāng)我們點擊按鈕時，就會發(fā)送AJAX請求并顯示學(xué)生的姓名和分?jǐn)?shù)。我們還定義了一個帶有id屬性為output的html
<script>
function getStudentsData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/api/students", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var students = JSON.parse(xhr.responseText);
var table = "<table><tr><th>學(xué)生姓名</th><th>學(xué)生分?jǐn)?shù)</th></tr>";
for (var i = 0; i < students.length; i++) {
var name = students[i].name;
var score = students[i].score;
table += "<tr><td>" + name + "</td><td>" + score + "</td></tr>";
}
table += "</table>";
var output = document.getElementById("output");
output.innerHTML = table;
}
};
xhr.send();
}
</script>
<button onclick="getStudentsData()">獲取學(xué)生數(shù)據(jù)</button>
<p id="output"></p>在上述代碼中，我們假設(shè)服務(wù)器返回了一個包含學(xué)生信息的JSON數(shù)組。在getStudentsData()函數(shù)中，我們遍歷了這個數(shù)組，并獲取每個學(xué)生的姓名和分?jǐn)?shù)。然后，我們動態(tài)地構(gòu)建了一個HTML表格，將學(xué)生的姓名和分?jǐn)?shù)插入到表格的每一行中。最后，我們將整個表格插入到帶有id屬性為output的