在Web開發(fā)中，經(jīng)常需要從數(shù)據(jù)庫中獲取數(shù)據(jù)并在網(wǎng)頁上展示給用戶。而使用Ajax結(jié)合PHP技術(shù)，可以實現(xiàn)在不刷新整個網(wǎng)頁的情況下，異步獲取數(shù)據(jù)庫中的數(shù)據(jù)并實時更新網(wǎng)頁內(nèi)容。本文將介紹如何使用Ajax和PHP來實現(xiàn)這一功能。

假設(shè)有一個簡單的學生信息管理系統(tǒng)，其中有一個學生列表頁面，需要從數(shù)據(jù)庫中獲取學生列表，并展示在網(wǎng)頁上。我們可以通過Ajax和PHP技術(shù)實現(xiàn)以下步驟：

首先，在前端頁面中使用Ajax發(fā)送請求給服務(wù)器端的PHP文件。通過Ajax的異步特性，我們可以在不刷新整個網(wǎng)頁的情況下向服務(wù)器發(fā)送請求，并接收服務(wù)器的響應(yīng)。

<script>
function getStudentList() {
$.ajax({
url: "get_student_list.php",
method: "GET",
success: function(response) {
// 處理服務(wù)器返回的響應(yīng)數(shù)據(jù)
// 更新網(wǎng)頁上的學生列表內(nèi)容
}
});
}
</script>

上述代碼中，我們使用了jQuery的Ajax方法來發(fā)送GET請求給服務(wù)器端的"get_student_list.php"文件。在success回調(diào)函數(shù)中，我們可以處理服務(wù)器返回的響應(yīng)數(shù)據(jù)，并更新網(wǎng)頁上的學生列表內(nèi)容。

接下來，我們需要在服務(wù)器端的PHP文件中編寫代碼來連接數(shù)據(jù)庫，并獲取學生列表數(shù)據(jù)。

<?php
// 連接數(shù)據(jù)庫
$conn = mysqli_connect("localhost", "username", "password", "database_name");
// 檢查數(shù)據(jù)庫連接是否成功
if (!$conn) {
die("數(shù)據(jù)庫連接失?。? . mysqli_connect_error());
}
// 查詢學生列表
$query = "SELECT * FROM students";
$result = mysqli_query($conn, $query);
// 處理查詢結(jié)果
if (mysqli_num_rows($result) >0) {
// 將查詢結(jié)果轉(zhuǎn)換為JSON格式
$students = array();
while ($row = mysqli_fetch_assoc($result)) {
$students[] = $row;
}
$json = json_encode($students);
// 輸出JSON數(shù)據(jù)
echo $json;
} else {
echo "沒有找到學生信息。";
}
// 關(guān)閉數(shù)據(jù)庫連接
mysqli_close($conn);
?>

上述PHP代碼中，我們首先使用mysqli_connect函數(shù)來連接數(shù)據(jù)庫。接著，我們通過mysqli_query函數(shù)執(zhí)行SQL查詢語句，獲取學生列表數(shù)據(jù)。然后，我們將查詢結(jié)果轉(zhuǎn)換為JSON格式，并通過echo語句輸出給前端頁面。

最后，在前端頁面的Ajax的success回調(diào)函數(shù)中，我們可以處理服務(wù)器返回的響應(yīng)數(shù)據(jù)，并更新網(wǎng)頁上的學生列表。

<script>
function getStudentList() {
$.ajax({
url: "get_student_list.php",
method: "GET",
success: function(response) {
// 處理服務(wù)器返回的響應(yīng)數(shù)據(jù)
var students = JSON.parse(response);
var studentList = document.getElementById("studentList");
studentList.innerHTML = "";
for (var i = 0; i< students.length; i++) {
var student = students[i];
var listItem = document.createElement("li");
listItem.innerHTML = student.name + " - " + student.age;
studentList.appendChild(listItem);
}
}
});
}
</script>

上述代碼中，我們首先通過JSON.parse方法將服務(wù)器返回的響應(yīng)數(shù)據(jù)轉(zhuǎn)換為JavaScript對象。接著，我們清空學生列表的內(nèi)容，并根據(jù)查詢結(jié)果動態(tài)創(chuàng)建