jQuery 向後端 Action 傳遞 List 集合的完整實現方案

場景描述

前端頁面有一組勾選框，用戶全選後需將所有行的 ID 收集成 List 通過 AJAX 傳給後端 addExtractAction 處理。圖示如下：

核心實現步驟

1. 前端收集數據並發送 AJAX

// 假設復選框 name="ids"，value 為各行 ID
var ids = [];
$("input[name='ids']:checked").each(function() {
    ids.push($(this).val());
});

// 方式一：傳統表單序列化（推薦簡單場景）
$.ajax({
    url: '/addExtractAction',
    type: 'POST',
    data: { ids: ids },  // jQuery 會自動轉為 ids=1&ids=2&ids=3...
    traditional: true,   // 關鍵：防止深度序列化為 ids[0]=1&ids[1]=2...
    success: function(resp) {
        console.log('提交成功', resp);
    },
    error: function(xhr) {
        alert('請求失敗：' + xhr.status);
    }
});

// 方式二：JSON 格式傳輸（適合複雜對象）
$.ajax({
    url: '/addExtractAction',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({ ids: ids }),
    success: function(resp) { /* ... */ }
});

2. 後端接收參數

Struts 2 / Spring MVC 通用寫法：

// 接收 List 或 List
private List ids;  // 配合 getter/setter

// 或在 Action 方法參數直接接收
public String execute(List ids) { ... }

// Spring MVC 註解方式
@PostMapping("/addExtractAction")
public Result addExtract(@RequestParam("ids") List ids) { ... }

3. 關鍵注意點

• traditional: true 讓 jQuery 用淺層序列化，後端才能正確綁定到 List/數組。
• 若用 contentType: 'application/json'，後端需用 @RequestBody 接收對象。
• 避免直接用 <a> 標簽傳值，無法承載動態集合且不安全。

完整頁面代碼參考

<form id="extractForm">
    <table>
        <tr><th><input type="checkbox" id="checkAll"> 全選</th></tr>
        <c:forEach items="${list}" var="item">
        <tr>
            <td><input type="checkbox" name="ids" value="${item.id}"></td>
            <td>${item.name}</td>
        </tr>
        </c:forEach>
    </table>
    <button type="button" onclick="submitExtract()">提取</button>
</form>

<script>
function submitExtract() {
    var ids = [];
    $("#extractForm input[name='ids']:checked").each(function() {
        ids.push(this.value);
    });
    if (ids.length === 0) { alert("請至少選擇一項"); return; }

    $.ajax({
        url: '${pageContext.request.contextPath}/addExtractAction',
        type: 'POST',
        data: { ids: ids },
        traditional: true,
        success: function(data) { alert("操作成功"); },
        error: function() { alert("網絡異常"); }
    });
}
</script>

採用此方案，前端收集、傳輸、後端接收全鏈路清晰可控，避免了「servletContext 獲取」等不規範做法。