EasyUI Form 表單提交獲取同名 input 陣列

需求

HTML 原生表單多個 <input name="id"> 提交後後台自動綁定數組/列表。EasyUI 如何實現？

方案

EasyUI 表單提交本質是 AJAX 序列化表單數據，同名字段會被覆蓋。需手動構建數組參數或使用 form('serializeArray') 獲取數組對象。

代碼示例

// HTML
<form id="myForm">
    <input name="id" value="1">
    <input name="id" value="2">
    <input name="id" value="3">
</form>

// JS
$('#myForm').form({
    url: '/submit',
    onSubmit: function() {
        // 可選：驗證
        return $(this).form('validate');
    },
    success: function(data) {
        console.log(data);
    }
});

// 提交觸發
$('#btnSubmit').click(function() {
    $('#myForm').submit(); // 觸發 EasyUI form 提交
});

// 後端接收
// Spring MVC: @RequestParam("id") List ids
// 或 @RequestParam("id") String[] ids

關鍵點

• EasyUI form('submit') 會自動收集所有表單字段，**同名字段會以逗號分隔字符串**發送（如 id=1,2,3）。
• 後端需按框架特性接收：Spring MVC 可直接綁定到 List/String[]；若為字符串需手動 split(",")。
• 若需精確數組格式，可用 form('serializeArray') 獲取對象數組，手動構建 JSON 提交（$.ajax）。