JQuery AJAX 是一種使用 JavaScript 編寫(xiě)的非常流行的技術(shù)，可以通過(guò) AJAX （異步 JavaScript 和 XML）技術(shù)向 web 服務(wù)器發(fā)出請(qǐng)求，然后在不需要重新加載頁(yè)面的情況下獲取響應(yīng)。

在這篇文章中，我們將學(xué)習(xí)如何使用 JQuery AJAX 查詢(xún)表格。我們將使用以下 HTML 代碼作為示例：

<table id="table">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>28</td>
</tr>
</tbody>
</table>

首先，我們需要編寫(xiě)一個(gè) JavaScript 函數(shù)，該函數(shù)將使用 JQuery AJAX 向 web 服務(wù)器發(fā)出請(qǐng)求，并將響應(yīng)作為參數(shù)傳遞到回調(diào)函數(shù)中：

function getTableData() {
$.ajax({
url: "tableData.php",
type: "POST",
dataType: "json",
success: function(response) {
// 處理響應(yīng)數(shù)據(jù)
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
}

在這個(gè)例子中，我們從一個(gè)名為 tableData.php 的腳本中獲取數(shù)據(jù)。接下來(lái)，在 success 回調(diào)函數(shù)中，我們將使用 JQuery 遍歷數(shù)據(jù)并將其添加到表格中：

function getTableData() {
$.ajax({
url: "tableData.php",
type: "POST",
dataType: "json",
success: function(response) {
var tableBody = "";
$.each(response, function(index, row) {
tableBody += "<tr><td>" + row.name + "</td><td>" + row.age + "</td></tr>";
});
$("#table tbody").html(tableBody);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
}

在這里，我們使用 JQuery 的 each() 函數(shù)遍歷響應(yīng)數(shù)據(jù)，并將每行數(shù)據(jù)添加到 tableBody 變量中。最后，我們使用 JQuery 的 html() 函數(shù)將 tableBody 變量的值設(shè)置為表格的 tbody 內(nèi)容。

現(xiàn)在，我們可以調(diào)用 getTableData() 函數(shù)來(lái)查詢(xún)表格數(shù)據(jù)：

$(document).ready(function() {
getTableData();
});

由于我們?cè)谶@個(gè)例子中使用了 POST 請(qǐng)求方式，所以我們需要在 tableData.php 腳本中處理 POST 請(qǐng)求并返回 JSON 數(shù)據(jù)。

這就是如何使用 JQuery AJAX 查詢(xún)表格的全部過(guò)程。