如何在Thymeleaf+Spring中动态添加表单行且不提交至控制器？

架构老林

2026-5-20

嘿，太懂你这种大表单每次刷新的糟心感了！之前做类似项目的时候也踩过这个坑，给你分享个纯前端配合Thymeleaf的无刷新解决方案，完全不用每次点「添加行」都请求后端~

核心思路

我们把Thymeleaf的行结构做成可复用的模板片段，然后用JavaScript克隆这个模板、替换索引后插入到页面里，全程不触发表单提交和页面刷新。同时保证动态生成的表单元素命名符合Spring的参数绑定规则，提交时后端依然能正常接收数据。

具体实现步骤

1. 编写Thymeleaf页面结构

把静态行和隐藏的行模板分开，模板里用占位符标记索引，方便后续替换：

<form th:action="@{/submit-form}" method="post">
    <!-- 存放所有行的容器 -->
    <div id="rows-container">
        <!-- 初始行：用Thymeleaf遍历已有数据，索引从0开始 -->
        <div class="form-row" th:each="item, stat : ${orderForm.items}">
            <input type="text" th:field="*{items[__${stat.index}__].name}" placeholder="商品名称">
            <input type="number" th:field="*{items[__${stat.index}__].quantity}" placeholder="数量">
            <button type="button" class="remove-row">删除</button>
        </div>
    </div>

    <!-- 隐藏的行模板：用Thymeleaf片段定义，仅作为克隆模板使用 -->
    <div id="row-template" th:fragment="formRow" style="display: none;">
        <div class="form-row">
            <input type="text" name="items[__INDEX__].name" placeholder="商品名称">
            <input type="number" name="items[__INDEX__].quantity" placeholder="数量">
            <button type="button" class="remove-row">删除</button>
        </div>
    </div>

    <!-- 操作按钮 -->
    <button type="button" id="add-row-btn">添加行</button>
    <button type="submit">提交表单</button>
</form>

2. 编写JavaScript处理动态增删

用原生JS实现无刷新的添加、删除逻辑，同时处理索引的维护：

document.addEventListener('DOMContentLoaded', function() {
    const addBtn = document.getElementById('add-row-btn');
    const rowContainer = document.getElementById('rows-container');
    const rowTemplate = document.getElementById('row-template').innerHTML;
    // 初始索引数：等于页面已有的行数
    let currentIndex = document.querySelectorAll('.form-row').length;

    // 添加行逻辑
    addBtn.addEventListener('click', function() {
        // 把模板里的__INDEX__占位符替换成当前索引
        const newRowHtml = rowTemplate.replace(/__INDEX__/g, currentIndex);
        // 插入到容器末尾
        rowContainer.insertAdjacentHTML('beforeend', newRowHtml);
        // 索引自增，为下一次添加做准备
        currentIndex++;
    });

    // 删除行逻辑：用事件委托处理动态生成的删除按钮
    rowContainer.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-row')) {
            e.target.closest('.form-row').remove();
            // 可选：删除后重新整理所有行的索引（Spring允许索引不连续，但整理后更规范）
            reindexAllRows();
        }
    });

    // 重新整理行索引的辅助函数
    function reindexAllRows() {
        const allRows = rowContainer.querySelectorAll('.form-row');
        allRows.forEach((row, index) => {
            // 替换行内所有输入框的name属性索引
            const inputs = row.querySelectorAll('input');
            inputs.forEach(input => {
                input.name = input.name.replace(/items\[(\d+)\]/, `items[${index}]`);
            });
            // 更新当前索引值
            currentIndex = index + 1;
        });
    }
});

3. 后端保证参数能正常接收

你的表单对象需要包含一个List类型的属性，Spring会自动把前端提交的数组格式参数绑定到这个List里：

// 表单对象
public class OrderForm {
    private List<OrderItem> items;

    // 生成getter、setter
}

// 行数据对象
public class OrderItem {
    private String name;
    private Integer quantity;

    // 生成getter、setter
}

// 控制器接收方法
@PostMapping("/submit-form")
public String submitForm(@ModelAttribute OrderForm orderForm) {
    // 处理表单数据，比如保存到数据库
    return "success-page";
}

关键细节说明

Thymeleaf片段：把行结构抽成片段，避免重复写HTML，也保证静态行和动态行的结构一致
索引占位符：用__INDEX__标记需要替换的索引位置，确保动态生成的表单元素命名符合Spring的绑定规则（items[N].property）
事件委托：删除按钮是动态生成的，所以用事件委托绑定点击事件，避免出现点击无效的问题
索引整理：删除行后可选重新整理索引，Spring其实支持不连续的索引，但整理后参数更整洁，也避免极端情况下的绑定问题

内容的提问来源于stack exchange，提问作者anonymous