使用AJAX刪除表格中的一行數據，并重新刷新表格是一個常見的需求。AJAX技術可以幫助我們在不刷新整個頁面的情況下與服務器進行通信，從而實現動態更新頁面的效果。本文將介紹如何使用AJAX完成刪除表格一行并重新刷新的操作，并通過具體的示例來說明。 在一個在線購物網站上，我們經常會遇到需要刪除購物車中的某個商品的情況。如何通過點擊刪除按鈕，實現從購物車中刪除商品，并在不刷新整個頁面的情況下更新購物車表格，給用戶帶來良好的體驗呢？接下來我們就來講解具體的實現流程。 首先，我們需要在每一行的刪除按鈕上添加一個事件監聽。當用戶點擊刪除按鈕時，我們會觸發AJAX請求，將要刪除的商品的ID發送到服務器端。以下是監聽按鈕事件的代碼： ```html

// HTML代碼片段
<button class="delete-button" data-id="1">刪除</button>
<button class="delete-button" data-id="2">刪除</button>
// JavaScript代碼片段
const deleteButtons = document.querySelectorAll('.delete-button');
deleteButtons.forEach((button) =>{
button.addEventListener('click', deleteRow);
});
// 事件處理函數
function deleteRow(event) {
const id = event.target.getAttribute('data-id');
// 發送AJAX請求
// ...
}

``` 當我們點擊“刪除”按鈕后，會觸發`deleteRow`函數。在該函數中，我們通過`getAttribute`方法獲取了要刪除的商品的ID，并準備將其發送到服務器端。接下來，我們需要使用AJAX技術來發送刪除請求，并在服務器處理完成后重新刷新表格。 ```html

function deleteRow(event) {
const id = event.target.getAttribute('data-id');
// 發送AJAX請求
const xhr = new XMLHttpRequest();
xhr.open('POST', '/delete', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理刪除完成后的邏輯
refreshTable();
}
};
xhr.send(`id=${id}`);
}
function refreshTable() {
// 發送AJAX請求，獲取最新的購物車數據
const xhr = new XMLHttpRequest();
xhr.open('GET', '/cart', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 將新的購物車數據更新到表格中
const cartData = JSON.parse(xhr.responseText);
updateTable(cartData);
}
};
xhr.send();
}
function updateTable(cartData) {
const tableBody = document.getElementById('cart-table-body');
tableBody.innerHTML = '';
cartData.forEach((item) =>{
const row = document.createElement('tr');
row.innerHTML = `${item.name}${item.price}${item.quantity}刪除`;
tableBody.appendChild(row);
});
}

``` 在`deleteRow`函數中，我們發送了一個POST請求到服務器端，告知服務器要刪除的商品的ID。服務器端在收到請求后進行相應的刪除操作，并返回一個成功的響應。 當AJAX請求的`readyState`為4（表示請求已完成）且`status`為200（表示請求成功）時，我們調用`refreshTable`函數。在`refreshTable`函數中，我們發送了一個GET請求到服務器端，獲取最新的購物車數據。服務器端將購物車數據返回給我們。 接著，在`updateTable`函數中，我們清空了表格內容，并使用新的購物車數據重新生成了表格。這樣，我們就實現了刪除一行數據后重新刷新表格的效果。 以上就是使用AJAX刪除表格一行數據，并在不刷新整個頁面的情況下重新刷新表格的方法。通過這種方法，我們可以提升用戶體驗，給用戶帶來更流暢的操作和反饋。希望本文對你在使用AJAX進行表格操作時有所幫助！