Spring Boot + Thymeleaf动态表单：提交未知数量对象列表的疑问

我尝试创建一个包含未知数量链接输入项的表单，初始仅显示1个链接输入框，可通过按钮重复添加新的输入框。当前HTML视图代码如下：

<div class="mb-3">
    <label for="image1" class="form-label">Image</label>
    <input type="text" class="form-control" id="image1" placeholder="url" th:field="*{urls}" name="image1" />
    <button id="btn"></button>
</div>

我可以通过JQuery和HTML轻松创建新的输入框，但不清楚如何将这些输入框的值传递到控制器中。目前我创建了一个专用类，通过List<String>存储URL，而非List<Image>。请问能否直接将值存储到images[x].url中？

当然可以直接把值绑定到images[x].url，Spring MVC原生支持这种集合对象的参数绑定，具体实现步骤如下：

1. 后端实体与DTO准备 #

假设你的Image实体类结构如下：

public class Image {
    private String url;
    // 省略getter、setter方法
}

表单对应的DTO（或直接用实体类封装）需要包含List<Image>类型的属性：

public class FormDTO {
    private List<Image> images;
    // 省略getter、setter方法
}

2. 前端输入框命名规则 #

动态添加输入框时，必须遵循Spring MVC能识别的命名格式设置name属性：

• 初始第一个输入框的name设为images[0].url
• 新增的第二个输入框name设为images[1].url，以此类推

对应的jQuery动态添加代码示例：

$(document).ready(function() {
    let index = 1; // 初始已有1个输入框，从1开始计数
    $("#btn").click(function() {
        const inputGroup = `
            <div class="mb-3">
                <label for="image${index}" class="form-label">Image</label>
                <input type="text" class="form-control" id="image${index}" placeholder="url" name="images[${index}].url" />
            </div>
        `;
        $(this).parent().after(inputGroup);
        index++;
    });
});

如果用Thymeleaf渲染初始输入框，可直接用th:field自动生成合规的name：

<input type="text" class="form-control" th:field="*{images[0].url}" placeholder="url" />

3. 控制器接收参数 #

控制器方法直接接收FormDTO对象即可自动完成参数绑定：

@PostMapping("/submit")
public String submitForm(@ModelAttribute FormDTO formDTO) {
    // formDTO.getImages()即可获取所有输入的url对应的Image对象列表
    // 后续业务逻辑处理
    return "success";
}

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