在現(xiàn)代的Web開(kāi)發(fā)中，動(dòng)態(tài)獲取數(shù)據(jù)是非常常見(jiàn)的需求之一。而獲取數(shù)據(jù)庫(kù)中的二維數(shù)組數(shù)據(jù)，可以通過(guò)AJAX（Asynchronous JavaScript and XML）實(shí)現(xiàn)。AJAX是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)，它可以實(shí)現(xiàn)在不重新加載整個(gè)頁(yè)面的情況下，更新部分頁(yè)面內(nèi)容。本文將介紹如何使用AJAX來(lái)獲取二維數(shù)組數(shù)據(jù)庫(kù)，并通過(guò)舉例說(shuō)明其實(shí)現(xiàn)方法和結(jié)果。
首先，我們需要準(zhǔn)備一個(gè)包含二維數(shù)組數(shù)據(jù)的數(shù)據(jù)庫(kù)。舉例來(lái)說(shuō)，我們可以創(chuàng)建一個(gè)學(xué)生信息表格，包含姓名、年齡和成績(jī)等信息。假設(shè)我們已經(jīng)使用MySQL數(shù)據(jù)庫(kù)創(chuàng)建了一個(gè)表格，并已填充了一些學(xué)生信息。現(xiàn)在，我們希望通過(guò)AJAX來(lái)獲取這些學(xué)生信息，并將其顯示在網(wǎng)頁(yè)上。
// HTML代碼
<div id="student-info"></div>
// JavaScript代碼
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var studentArray = JSON.parse(this.responseText); // 解析從服務(wù)器返回的JSON格式數(shù)據(jù)
var infoDiv = document.getElementById("student-info");
var table = document.createElement("table");
for (var i = 0; i< studentArray.length; i++) {
var row = document.createElement("tr");
var nameCell = document.createElement("td");
var ageCell = document.createElement("td");
var gradeCell = document.createElement("td");
nameCell.innerHTML = studentArray[i][0];
ageCell.innerHTML = studentArray[i][1];
gradeCell.innerHTML = studentArray[i][2];
row.appendChild(nameCell);
row.appendChild(ageCell);
row.appendChild(gradeCell);
table.appendChild(row);
}
infoDiv.appendChild(table);
}
};
xmlhttp.open("GET", "getStudents.php", true); // getStudents.php是用于獲取學(xué)生信息的服務(wù)器端腳本
xmlhttp.send();在上述代碼中，我們使用了XMLHttpRequest對(duì)象來(lái)發(fā)送一個(gè)AJAX請(qǐng)求。當(dāng)請(qǐng)求返回時(shí)，我們通過(guò)逐行解析返回的JSON格式數(shù)據(jù)創(chuàng)建一個(gè)包含學(xué)生信息的表格，并將其添加到一個(gè)指定id的div元素中。需要注意的是，我們需要通過(guò)服務(wù)器端腳本（getStudents.php）來(lái)獲取數(shù)據(jù)庫(kù)中的二維數(shù)組數(shù)據(jù)，并將其以JSON格式返回給客戶端。
下面是一個(gè)簡(jiǎn)化的getStudents.php的示例：
// PHP代碼
<?php
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "myDB";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
}
$sql = "SELECT name, age, grade FROM students";
$result = $conn->query($sql);
$studentArray = array();
if ($result->num_rows >0) {
while($row = $result->fetch_assoc()) {
array_push($studentArray, array($row['name'], $row['age'], $row['grade']));
}
}
echo json_encode($studentArray); // 將學(xué)生信息以JSON格式返回給客戶端
$conn->close();
?>在上述PHP代碼中，我們首先連接到數(shù)據(jù)庫(kù)，然后執(zhí)行一個(gè)SELECT語(yǔ)句來(lái)獲取學(xué)生信息的結(jié)果集。通過(guò)循環(huán)遍歷結(jié)果集的每一行，并將每一行的姓名、年齡和成績(jī)添加到一個(gè)二維數(shù)組。最后，我們使用json_encode函數(shù)將該二維數(shù)組以JSON格式返回給客戶端。
通過(guò)上述代碼的實(shí)現(xiàn)，我們成功地使用AJAX獲取了數(shù)據(jù)庫(kù)中的二維數(shù)組數(shù)據(jù)，并將其以表格形式顯示在網(wǎng)頁(yè)上。這個(gè)例子只是一個(gè)簡(jiǎn)單的示范，實(shí)際應(yīng)用可能會(huì)更加復(fù)雜，但基本的思路是相同的。AJAX和服務(wù)器端腳本的結(jié)合，為我們提供了一種方便、高效地獲取數(shù)據(jù)庫(kù)中二維數(shù)組數(shù)據(jù)的方法。