AJAX（Asynchronous JavaScript and XML）是一種利用JavaScript和XML來(lái)創(chuàng)建異步通信的技術(shù)。借助AJAX可以實(shí)現(xiàn)無(wú)刷新的動(dòng)態(tài)數(shù)據(jù)加載，并可以向服務(wù)器發(fā)送請(qǐng)求并更新頁(yè)面內(nèi)容。本文將介紹如何使用AJAX來(lái)顯示數(shù)據(jù)庫(kù)中的數(shù)據(jù)，并以舉例說(shuō)明各個(gè)步驟。
假設(shè)我們有一個(gè)簡(jiǎn)單的學(xué)生管理系統(tǒng)，其中保存了學(xué)生的姓名、年齡和成績(jī)等信息。我們希望通過(guò)AJAX來(lái)實(shí)現(xiàn)實(shí)時(shí)顯示學(xué)生信息的功能。
// index.html
<html><head><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script>$(document).ready(function() {
// 發(fā)送AJAX請(qǐng)求
$.ajax({
url: "load_students.php", // 請(qǐng)求的URL
method: "GET", // 請(qǐng)求方法
success: function(response) { // 請(qǐng)求成功的回調(diào)函數(shù)
var students = JSON.parse(response); // 解析服務(wù)器返回的JSON數(shù)據(jù)
// 將學(xué)生信息顯示在頁(yè)面上
for (var i = 0; i< students.length; i++) {
var student = students[i];
$("body").append("<p>姓名：" + student.name + "</p>");
$("body").append("<p>年齡：" + student.age + "</p>");
$("body").append("<p>成績(jī)：" + student.score + "</p>");
$("body").append("<hr>");
}
}
});
});
</script></head><body></body></html>以上是一個(gè)簡(jiǎn)單的index.html頁(yè)面，頁(yè)面加載完成后，會(huì)發(fā)送一個(gè)AJAX GET請(qǐng)求至load_students.php。服務(wù)器將會(huì)返回一個(gè)包含學(xué)生信息的JSON數(shù)據(jù)，然后通過(guò)JavaScript解析并將學(xué)生信息逐個(gè)顯示在頁(yè)面上。
// load_students.php
<?php
// 連接數(shù)據(jù)庫(kù)
$conn = mysqli_connect("localhost", "username", "password", "database");
// 查詢學(xué)生信息
$query = "SELECT * FROM students";
$result = mysqli_query($conn, $query);
// 構(gòu)建學(xué)生信息的數(shù)組
$students = array();
while ($row = mysqli_fetch_assoc($result)) {
$students[] = $row;
}
// 將學(xué)生信息的數(shù)組轉(zhuǎn)換成JSON格式并返回
echo json_encode($students);
// 關(guān)閉數(shù)據(jù)庫(kù)連接
mysqli_close($conn);
?>以上是一個(gè)簡(jiǎn)單的load_students.php文件，該文件連接到數(shù)據(jù)庫(kù)并從students表中查詢學(xué)生信息，并將結(jié)果轉(zhuǎn)換為JSON格式并返回給前端。
總結(jié)來(lái)說(shuō)，使用AJAX顯示數(shù)據(jù)庫(kù)中的數(shù)據(jù)需要以下幾個(gè)步驟：
- 在前端發(fā)送AJAX請(qǐng)求到服務(wù)器
- 在服務(wù)器接收請(qǐng)求并從數(shù)據(jù)庫(kù)中獲取相應(yīng)數(shù)據(jù)
- 將數(shù)據(jù)轉(zhuǎn)換為JSON格式并返回給前端
- 在前端解析JSON數(shù)據(jù)并將其顯示在頁(yè)面上
通過(guò)以上步驟，我們可以實(shí)現(xiàn)實(shí)時(shí)顯示數(shù)據(jù)庫(kù)中的數(shù)據(jù)，并通過(guò)AJAX無(wú)刷新地更新頁(yè)面內(nèi)容。