AJAX是一種在web開發中常用的技術，能夠實現在不刷新頁面的情況下與后臺進行數據交互。在表單提交的情況下，我們通常會使用表單的submit事件來將數據發送至后臺，但是對于表格這種數據結構來說，傳統的方式會有一些不便。因此，通過使用AJAX提交表格數據到后臺可以極大地提高用戶的交互體驗，并使數據的處理更加高效。

假設我們有一個簡單的表格，用于展示商品的銷售數據。每一行數據對應一個商品的銷售情況，包括商品名稱、銷售數量和銷售額等信息。我們希望能夠通過表格的提交按鈕將數據發送至后臺，以便后臺進行進一步的處理和存儲。傳統的方式是在表格中加入一個提交按鈕，并在點擊按鈕時獲取表格中的數據，然后使用表單的submit事件將數據發送至后臺處理。但是這種方式需要刷新頁面，用戶體驗較差。

通過使用AJAX，我們可以優化這個過程。首先，我們需要為表格的每一行數據添加一個選擇框，用于勾選需要提交的數據。用戶可以根據需要選擇需要提交的行，也可以全選或取消全選。然后，在點擊表格的提交按鈕時，將選中的行數據提取出來，并使用AJAX發送至后臺進行處理。

// 觸發提交按鈕的點擊事件
document.getElementById('submitBtn').addEventListener('click', function() {
// 獲取所有選擇框
var checkboxes = document.getElementsByClassName('checkbox');
// 存儲被選中的行數據
var selectedData = [];
// 遍歷選擇框，提取被選中的行數據
for(var i = 0; i < checkboxes.length; i++) {
if(checkboxes[i].checked) {
// 獲取當前行的數據
var rowData = {
name: checkboxes[i].closest('tr').querySelector('.name').innerText,
quantity: checkboxes[i].closest('tr').querySelector('.quantity').innerText,
sales: checkboxes[i].closest('tr').querySelector('.sales').innerText
};
// 將當前行的數據添加到selectedData數組中
selectedData.push(rowData);
}
}
// 發送AJAX請求，將選中的行數據發送至后臺
var xhr = new XMLHttpRequest();
xhr.open('POST', '/backend', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
// 請求成功后的處理邏輯
console.log(xhr.responseText);
}
};
xhr.send(JSON.stringify(selectedData));
});

上述的代碼中，我們通過addEventListener方法給提交按鈕添加了一個點擊事件的監聽器，在事件處理函數中，首先獲取了所有的選擇框，并創建一個數組selectedData來存儲被選中的行數據。然后，通過遍歷選擇框，判斷哪些行被選中，并將選中行的數據提取出來，存儲到selectedData數組中。最后，使用AJAX發送POST請求，將selectedData數組轉換為JSON字符串，并發送至后臺。

在后臺接收到數據后，可以根據需要進行進一步的處理和存儲。例如，可以將數據存儲到數據庫中或進行其他業務邏輯的處理。同時，后臺也可以返回相應的結果給前端，例如處理成功或失敗的提示信息等。

總之，通過使用AJAX提交表格數據到后臺，我們可以實現在不刷新頁面的情況下與后臺進行數據交互，大大提升了用戶的交互體驗。而且，通過選擇框的方式，用戶可以自由選擇需要提交的數據，靈活性增強。這種方式對于處理大量數據或對數據進行多種操作的情況下尤為適用。