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将数据发送到后台的控制器进行进一步处理。在控制器中，我们可以使用后端语言相应的全局变量接收前台发送的数组数据，并进行相应的处理。通过这种方式，我们可以实现前后端的数据交互和协作，为用户提供更好的交互体验。