AJAX 是一種強大的前端技術，可以在不刷新整個網頁的情況下向后臺發送請求并獲取數據。它的應用十分廣泛，可以實現各種功能，包括提交復選框的數據。本文將介紹如何使用 AJAX 向后臺提交復選框的值，并通過實例說明其應用。

一、原生代碼實現

首先，我們需要創建一個 HTML 表單包含復選框，以及一個提交按鈕觸發 AJAX 請求：

<form id="myForm">
<input type="checkbox" name="option1" value="1">選項 1<br>
<input type="checkbox" name="option2" value="2">選項 2<br>
<input type="checkbox" name="option3" value="3">選項 3<br>
<button onclick="submitForm()">提交</button>
</form>

在 JavaScript 中，我們需要編寫一個函數來獲取所選復選框的值，并使用 AJAX 將其發送到后臺：

function submitForm() {
var form = document.getElementById("myForm");
var options = form.getElementsByTagName("input");
var selectedOptions = [];
for (var i = 0; i< options.length; i++) {
if (options[i].type === "checkbox" && options[i].checked) {
selectedOptions.push(options[i].value);
}
}
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) {
// 請求成功后的處理
}
};
xhr.send(JSON.stringify(selectedOptions));
}

上述代碼中，我們首先通過getElementById方法獲取到表單元素，然后使用getElementsByTagName方法獲取到所有復選框選項。接著，我們遍歷所有復選框，如果復選框的類型為 "checkbox" 且被選中，則將其值保存在selectedOptions數組中。

之后，我們使用XMLHttpRequest()創建一個新的 AJAX 請求對象。通過設置open()方法的參數，我們聲明請求的類型為 POST，并指定請求的 URL。然后，我們通過setRequestHeader()方法設置請求頭的 Content-Type 為 application/json，以便后臺可正確解析數據。

在發送請求之前，我們還需要設置響應狀態變化時的回調函數。在該回調函數中，我們可以處理后臺返回的數據。最后，我們調用send()方法發送 AJAX 請求，并將selectedOptions數組轉換為 JSON 字符串作為請求體。

通過上述代碼，我們可以實現復選框數據的提交，并通過 AJAX 將其發送到后臺進行處理。

二、使用 jQuery 實現

除了原生 JavaScript 外，我們還可以使用 jQuery 框架來簡化 AJAX 請求的實現過程。下面是使用 jQuery 實現復選框提交的代碼：

<form id="myForm">
<input type="checkbox" name="option1" value="1">選項 1<br>
<input type="checkbox" name="option2" value="2">選項 2<br>
<input type="checkbox" name="option3" value="3">選項 3<br>
<button id="submitBtn">提交</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$("#submitBtn").click(function() {
var selectedOptions = [];
$("input[type=checkbox]:checked").each(function() {
selectedOptions.push($(this).val());
});
$.ajax({
url: "/backend",
type: "POST",
data: JSON.stringify(selectedOptions),
contentType: "application/json",
success: function(response) {
// 請求成功后的處理
}
});
});
</script>

與原生 JavaScript 不同的是，使用 jQuery 可以通過選擇器簡化 DOM 操作。在上述代碼中，我們通過 ID 選擇器選中提交按鈕，并使用click()方法為按鈕綁定點擊事件處理函數。在該函數中，我們使用 jQuery 選擇器選中所有已選中的復選框，并通過each()方法遍歷每個已選中的復選框，將其值保存在selectedOptions數組中。

接下來，我們使用$.ajax()方法發起 AJAX 請求。通過設置url參數指定請求的 URL，設置type參數為 "POST" 表示請求類型為 POST，設置data參數為JSON.stringify(selectedOptions)將選項數組轉換為 JSON 字符串。通過設置contentType參數為 "application/json" 設置請求頭的 Content-Type。最后，我們可以在success回調函數中處理后臺返回的數據。

結論

通過本文的介紹，我們了解了如何使用原生 JavaScript 和 jQuery 實現復選框的提交。無論是使用原生 JavaScript 還是 jQuery，我們都可以輕松地獲取所選復選框的值，并通過 AJAX 向后臺提交。根據實際需求，可以使用不同的方法實現更復雜的操作。

上述示例代碼僅為演示用途，實際項目中需要根據后臺接口進行適當的調整。另外，為了保證安全性，我們應該對從前端接收的用戶輸入數據進行驗證和過濾，以防止潛在的安全問題和攻擊。