Spring MVC 動態列表數據綁定兩種實戰方式：List 表單對象 vs 原生 Request 參數獲取

業務場景

頁面動態增減行（如多店鋪信息、多擔保人信息），提交時後端需綁定 List<Entity> 或逐行獲取參數。

方式一：List 表單對象綁定（推薦，OOP 風格）

1. 實體類

public class BusLoanInfoShop {
    private Integer id, bid;
    private String shopName, platformName, shopLevel, operatingPeriod;
    private String shopOwner, subAccount, sbuPassword, businessOpera;
    private String businessAddress, warehouseAddress, salesIncome;
    private String totalLiability, bankLiabilities, netProfit;
    // getter/setter 省略
}

2. 表單包裝類

public class ShopListForm {
    private List<BusLoanInfoShop> shop;
    // getter/setter
}

3. Controller 入參直接綁定

@RequestMapping("/save")
public void save(ShopListForm shopForm, HttpServletResponse response) {
    for (BusLoanInfoShop shop : shopForm.getShop()) {
        System.out.println("shopName=" + shop.getShopName());
    }
    // 業務保存...
}

4. JSP 動態行輸入名規則：shop[索引].屬性名

<tr id="tShopRow0">
    <td><input name="shop[0].shopName" ...></td>
    <td><input name="shop[0].platformName" ...></td>
    ...
</tr>
<!-- JS 動態添加行時，將 name 更新為 shop[1].xxx, shop[2].xxx ... -->

5. JavaScript 動態增減行核心邏輯

var rowCount = 0; // 隱藏域存儲當前行數

function addShopRow() {
    rowCount++;
    var $newRow = $("#tShopRow0").clone(true).attr("id", "tShopRow" + rowCount);
    $newRow.find("input").val(""); // 清空值
    $newRow.find("input").each(function() {
        var name = $(this).attr("name"); // shop[0].shopName
        name = name.replace(/\[0\]/, "[" + rowCount + "]");
        $(this).attr("name", name).attr("id", name.replace(".", "_"));
    });
    $newRow.appendTo("#tblShopData");
    $("#rowCount").val(rowCount);
}

function delShopRow() {
    if (rowCount > 0) {
        $("#tShopRow" + rowCount).remove();
        rowCount--;
        $("#rowCount").val(rowCount);
    }
}

方式二：原生 Request 獲取參數（適用簡單/臨時需求）

Controller 手動拼裝

@RequestMapping("/save")
public void save(HttpServletRequest request, HttpServletResponse response) {
    BusLoanInfoGuaranter g = new BusLoanInfoGuaranter();
    g.setBid(busLoanInfo.getId());
    // 遍歷行數，按 guaranterName0, guaranterName1... 獲取
    for (int i = 0; i <= maxRow; i++) {
        g.setGuaranterName(request.getParameter("guaranterName" + i));
        g.setGuaranterCard(request.getParameter("guaranterCard" + i));
        // ... 其他字段
        if (StringUtils.isBlank(g.getGuaranterName())) continue; // 跳過空行
        guaranteeService.save(g);
    }
}

JSP 輸入名規則：字段名 + 索引

<input name="guaranterName0" id="guaranterName0">
<input name="guaranterCard0" id="guaranterCard0">
<!-- JS 動態行同樣更新 name/id 為 guaranterName1, guaranterCard1... -->

JS 邏輯同方式一，僅 name 格式不同

兩種方式對比

JS 通用增強建議

• 使用 data-index 屬性而非依賴 DOM 順序，避免刪除中間行導致索引錯亂。
• 克隆時 .clone(true) 保留事件綁定，但需注意 id 唯一性（建議移除 id 或重命名）。
• 提交前前端校驗必填項，減少無效請求。

總結

首選方式一：定義 ListForm + 實體類，JSP 按 list[索引].屬性 命名，Spring 自動綁定，代碼乾淨、類型安全、支援校驗。
方式二作為備選：當參數名無法控制（如對接第三方固定格式）或極簡單臨時接口時使用。