AJAX（Asynchronous JavaScript And XML）是一種在Web開發中常用的技術，可以實現網頁與服務器之間的異步數據交互。在使用PHP開發動態網頁時，使用AJAX來實現動態加載表格是一種非常常見的需求。本文將介紹如何使用AJAX動態加載PHP表格，并通過具體的實例來說明。

實例背景

假設我們正在開發一個學生管理系統的后臺，需要將學生的信息展示在一個表格中。學生的信息包括姓名、年齡和成績。現在我們需要實現一個功能，當用戶選擇不同的年級時，表格會實時更新，顯示該年級的學生信息。

實現步驟

首先，我們需要在前端頁面中添加一個下拉菜單，用于選擇年級。當用戶選擇不同的年級時，通過AJAX發送請求到服務器，獲取對應年級的學生信息，并將結果顯示在表格中。

<select id="grade" onchange="loadStudents()">
<option value="1">一年級</option>
<option value="2">二年級</option>
<option value="3">三年級</option>
</select>
<table id="studentTable">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>成績</th>
</tr>
</thead>
<tbody>
<!-- 動態加載的學生信息將顯示在這里 -->
</tbody>
</table>

編寫JavaScript函數

接下來，我們需要編寫一個JavaScript函數，用于實現AJAX請求和表格更新的邏輯。

function loadStudents() {
var grade = document.getElementById("grade").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var students = JSON.parse(xhr.responseText);
var tableBody = document.getElementById("studentTable").getElementsByTagName("tbody")[0];
tableBody.innerHTML = "";
for (var i = 0; i< students.length; i++) {
var student = students[i];
var row = tableBody.insertRow(i);
var nameCell = row.insertCell(0);
var ageCell = row.insertCell(1);
var gradeCell = row.insertCell(2);
nameCell.innerHTML = student.name;
ageCell.innerHTML = student.age;
gradeCell.innerHTML = student.grade;
}
}
}
};
xhr.open("GET", "getStudents.php?grade=" + grade, true);
xhr.send();
}

編寫PHP代碼

最后，我們需要編寫一個PHP文件，用于處理AJAX請求并返回對應年級的學生信息。

// getStudents.php
$grade = $_GET["grade"];
// 根據年級從數據庫或其他數據源獲取學生信息
$students = getStudentsByGrade($grade);
// 將學生信息轉換為JSON格式并輸出
echo json_encode($students);

通過以上步驟的實現，當用戶在下拉菜單選擇不同的年級時，前端頁面會通過AJAX請求傳遞選擇的年級參數到服務器的getStudents.php文件。服務器端根據參數從數據庫或其他數據源獲取對應年級的學生信息，并將結果以JSON格式返回。前端頁面接收到返回的學生信息后，使用JavaScript動態更新表格。

總結

本文通過一個實際的例子，演示了如何使用AJAX動態加載PHP表格。通過使用AJAX請求和響應的方式，可以在不刷新整個頁面的情況下，實時更新表格中的數據。這為用戶提供了更好的交互體驗，同時也提高了網頁的性能和效率。