在Web開發中，經常會遇到需要獲取多個復選框的值的情況。而采用傳統的表單提交方式獲取復選框的值，會導致頁面刷新，用戶體驗較差。然而，借助Ajax技術，我們可以在不刷新頁面的前提下獲取復選框的值，并對其進行處理。本文將通過舉例和詳細代碼，介紹如何使用Ajax獲取多個復選框的值。

一、構建復選框

首先，我們需要在HTML頁面中構建多個復選框。假設我們要獲取用戶選擇的興趣愛好，可以這樣構建：

<!-- HTML代碼 -->
<label>
<input type="checkbox" name="hobby" value="football"> 足球
</label>
<label>
<input type="checkbox" name="hobby" value="basketball"> 籃球
</label>
<label>
<input type="checkbox" name="hobby" value="swimming"> 游泳
</label>

在上述代碼中，我們為每個復選框指定了相同的name屬性，這樣在提交表單的時候，這些復選框所選的值就會被合并到一個數組中。

二、編寫Ajax請求

接下來，我們需要編寫Javascript代碼，通過Ajax方式獲取用戶選擇的復選框值。首先，在頁面中引入jQuery庫，方便操作DOM，并簡化Ajax請求的編寫。

<!-- HTML代碼 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

然后，我們在Javascript中編寫以下代碼：

<!-- Javascript代碼 -->
<script>
$(document).ready(function() {
// 當用戶點擊按鈕時觸發事件
$('#submitBtn').click(function() {
// 創建一個空數組，用于存儲選中的復選框值
var selectedHobbies = [];
// 遍歷所有復選框
$('input[name="hobby"]:checked').each(function() {
// 將選中的復選框值添加到數組中
selectedHobbies.push($(this).val());
});
// 輸出選中的復選框值
console.log(selectedHobbies);
// 發送Ajax請求，將選中的復選框值傳遞給服務器端進行處理
$.ajax({
url: 'process.php',  // 處理請求的URL
type: 'POST',        // 請求類型為POST
data: {hobbies: selectedHobbies},  // 將選中的復選框值作為參數傳遞給服務器端
success: function(response) {
// 服務器端處理成功后的回調函數
console.log(response);
}
});
});
});
</script>

在上述代碼中，我們通過jQuery選擇器選擇了所有name屬性為"hobby"且被選中的復選框，在遍歷過程中將它們的值添加到一個數組中。然后，我們發送了一個Ajax請求，將選中的復選框值作為參數傳遞給服務器端進行處理。

三、服務器端處理

在前端代碼中，我們將選中的復選框值通過Ajax請求發送給了服務器端，接下來我們需要在服務器端進行處理。假設我們使用PHP作為后端語言，可以這樣處理：

<!-- process.php -->
<?php
// 獲取前端傳遞的選中的復選框值
$hobbies = $_POST['hobbies'];
// 在服務器端進行相應的處理，這里只是簡單地輸出選中的復選框值
print_r($hobbies);
?>

在上述代碼中，我們首先使用$_POST超全局變量獲取前端通過Ajax傳遞的選中的復選框值。然后，可以根據實際業務需求進行相應的處理，這里只是簡單地將選中的復選框值輸出到頁面上。

綜上所述，通過使用Ajax技術獲取多個復選框的值，我們可以在不刷新頁面的情況下，快速獲取到用戶所選的復選框值，并將其傳遞給服務器端進行處理。這大大提升了用戶體驗，避免了頁面的刷新。