Ajax（Asynchronous JavaScript and XML）是一種用于在后臺與服務器進行異步通信的技術，它可以在不重新加載整個頁面的情況下更新部分頁面內容。在Web開發中，使用Ajax可以實現許多強大的功能，包括刪除表格數據。本文將介紹如何使用Ajax來刪除表格數據，并通過舉例說明其實際應用。

刪除表格數據是一個常見的需要，例如，在一個電商網站中，用戶可以通過點擊“刪除”按鈕來刪除購物車中的某個商品。在這種情況下，我們可以使用Ajax來實現刪除功能，而不需要重新加載整個頁面。

首先，我們需要將每個刪除按鈕與其所對應的數據項關聯起來。一種常見的方法是給每個按鈕添加一個唯一的ID或類名。例如，假設我們有一個表格，其中包含多個行，每一行都有一個刪除按鈕和對應的數據項。我們可以為每個刪除按鈕添加一個類名“delete-btn”，并為每個數據項添加一個類名“data-item”。

<table>
<tr>
<td class="data-item">數據項1</td>
<td><button class="delete-btn" data-id="1">刪除</button></td>
</tr>
<tr>
<td class="data-item">數據項2</td>
<td><button class="delete-btn" data-id="2">刪除</button></td>
</tr>
</table>

接下來，我們需要編寫一個處理刪除請求的服務器端腳本。這個腳本將接收一個唯一的數據項ID，并從數據庫中刪除對應的數據。這里我們使用PHP來演示服務器端腳本的實現。

<?php
$id = $_POST['id'];
// 執行刪除操作
// ...
// 返回成功響應
echo json_encode(["status" => "success"]);
?>

然后，我們需要使用JavaScript來處理刪除按鈕的點擊事件。當用戶點擊刪除按鈕時，我們將使用Ajax向服務器發送一個請求，并在成功響應時更新表格內容。以下是一個簡單的示例：

document.querySelectorAll('.delete-btn').forEach(function(button) {
button.addEventListener('click', function() {
var id = button.dataset.id;
// 發送Ajax請求
var xhr = new XMLHttpRequest();
xhr.open('POST', 'delete.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.status === 'success') {
// 更新表格內容
button.closest('tr').remove();
}
}
};
xhr.send('id=' + id);
});
});

在上面的例子中，我們使用querySelectorAll方法選擇所有的刪除按鈕，并分別為它們添加了一個點擊事件處理程序。當用戶點擊刪除按鈕時，我們首先獲取按鈕的data-id屬性值，然后創建一個XMLHttpRequest對象，并使用open方法指定要發送的請求類型和URL。接下來，我們使用setRequestHeader方法設置請求頭，告訴服務器請求的內容類型。同時，我們還定義了一個onload事件處理程序，當服務器返回響應時將被執行。在事件處理程序中，我們首先檢查響應的狀態碼是否為200，然后使用JSON.parse方法解析響應的文本內容。如果服務器返回的狀態為"success"，我們將使用closest方法找到最近的父元素tr，并調用remove方法將其從DOM中移除。

通過以上步驟，我們成功地使用Ajax實現了刪除表格數據的功能。無論是刪除購物車中的商品還是管理后臺中的數據，我們都可以使用類似的方法來刪除表格數據，并通過Ajax來實現無刷新更新頁面內容的效果。