AJAX(Asynchronous JavaScript and XML)是一種異步的前端技術，能夠使用JavaScript在后臺與服務器進行數據交互。在Web開發中，有時候需要將前端頁面中的數組數據傳遞給控制器，以便后續的數據處理和展示。本文將介紹如何使用AJAX從前臺傳遞數組數據到控制器，并給出詳細的示例和解釋。

在前端頁面中，我們可以使用JavaScript來獲取和處理數組數據。假設我們有一個網頁上顯示了一個商品列表，用戶可以勾選不同的商品進行批量操作。當用戶勾選完畢后，我們希望將選中的商品的id傳遞給控制器進行進一步的處理。以下是一個簡單的示例代碼：

function getSelectedIds() {
var checkboxes = document.getElementsByName('product');
var selectedIds = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
selectedIds.push(checkboxes[i].value);
}
}
return selectedIds;
}
function sendDataToController() {
var selectedIds = getSelectedIds();
// 使用AJAX發送選中的商品id數組到控制器
$.ajax({
url: 'controllerUrl',
type: 'POST',
data: {ids: selectedIds},
success: function(response) {
// 請求成功后的處理邏輯
},
error: function() {
// 請求失敗后的處理邏輯
}
});
}

上述代碼中，我們定義了兩個函數getSelectedIds()和sendDataToController()。首先，getSelectedIds()函數通過獲取所有name屬性為'product'的復選框元素，將選中的商品id添加到一個空數組中，并返回該數組。然后，sendDataToController()函數調用了getSelectedIds()函數，獲取選中的商品id數組，并使用AJAX將該數組數據通過POST方式發送到指定的控制器URL。

在控制器中，我們可以使用相應的后端語言（例如PHP、Java等）接收前臺發送的數組數據。以下是一個簡單的PHP控制器代碼示例：

function processData() {
$selectedIds = $_POST['ids'];
// 對選中的商品id數組進行進一步處理
// ...
// 返回處理結果
echo 'Data processed successfully';
}
processData();

在上述示例中，我們使用PHP的$_POST全局變量獲取前臺發送過來的數組數據。然后，我們可以根據業務邏輯對數組數據進行進一步的處理。處理完成后，可以通過echo語句將處理結果返回給前臺。

總之，使用AJAX從前臺傳遞數組數據到控制器是一種非常常見和有用的技術。通過前端頁面中的JavaScript代碼，我們可以方便地獲取和處理數組數據，并使用AJAX將數據發送到后臺的控制器進行進一步處理。在控制器中，我們可以使用后端語言相應的全局變量接收前臺發送的數組數據，并進行相應的處理。通過這種方式，我們可以實現前后端的數據交互和協作，為用戶提供更好的交互體驗。