AJAX（Asynchronous JavaScript and XML）是一種在不重新加載整個網頁的情況下，通過與后端進行異步通信獲取數據的技術。在Web開發中，我們經常需要將前端選中的多行數據傳遞給后端進行處理。本文將介紹使用AJAX將選中的多行數據傳輸給后端的方法，并通過舉例說明實現過程。

為了更好地理解，我們假設有一個學生管理系統，其中有一個學生列表頁面，管理員可以選中多行學生數據進行批量操作，比如刪除、更新等。當管理員選擇了多行學生數據后，我們希望能夠將這些選中的學生數據發送到后端進行相應的處理。

首先，我們需要在前端界面中添加一個復選框供管理員選擇多行數據。這里我們使用HTML中的元素，并給它設置一個唯一的標識符。代碼如下：

<input type="checkbox" id="student1" value="1">
<label for="student1">學生1</label>

接下來，我們需要在前端頁面中添加一個按鈕，供管理員點擊以觸發數據傳輸到后端的操作。我們可以給這個按鈕添加一個點擊事件監聽，在事件處理函數中獲取選中的學生數據并使用AJAX的XMLHttpRequest對象將數據發送給后端。代碼如下：

<button id="submitBtn" onclick="submitData()">提交</button>
<script>
function submitData() {
// 獲取選中的學生數據
var selectedStudents = [];
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
selectedStudents.push(checkboxes[i].value);
}
}
// 創建AJAX請求
var xhr = new XMLHttpRequest();
xhr.open('POST', '/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');
// 發送選中的學生數據
xhr.send(JSON.stringify(selectedStudents));
}
</script>

在上面的代碼中，我們使用了querySelectorAll方法來獲取頁面中所有類型為checkbox的元素，并通過循環判斷checked屬性是否為true，來獲取所有被選中的學生數據。將這些數據存入selectedStudents數組中。隨后，我們創建了一個XMLHttpRequest對象，設置請求的方法為POST，URL為/submit，并設置Content-Type請求頭為application/json。最后，我們通過調用send方法將selectedStudents的JSON字符串形式發送給后端。

在后端接收到前端發送的數據后，我們可以使用后端的編程語言（如Java、PHP等）解析JSON數據，并進行相應的處理。下面是一段使用Java的后端代碼示例：

@RequestMapping(value = "/submit", method = RequestMethod.POST)
public String submit(@RequestBody List<Integer> selectedStudents) {
// 對選中的學生數據進行處理
for (Integer studentId : selectedStudents) {
// 執行相應的操作，如刪除、更新等
}
// 返回處理結果
return "success";
}

在上面的代碼中，我們使用了Spring MVC框架中的@RequestMapping注解來指定處理HTTP POST請求的URL。@RequestBody注解表示將請求體中的數據解析成指定類型（這里是List）的對象。后續代碼就可以通過遍歷selectedStudents列表，執行相應的操作。

綜上所述，通過使用AJAX，我們可以在前端頁面中選中多行數據，并將這些數據傳輸給后端進行處理。這種方法可以極大地提高用戶體驗并減少不必要的后端請求。