使用单个 Ajax 调用向 Spring Boot 提交许多表单

Question

我有一个包含许多表单的页面（这是一个 thymeleaf 页面，表单是动态创建的）。此表单由字符串数据和一个文件组成。

我希望能够从所有表单中收集所有数据并将其发送到 Spring 控制器。

我可以毫无问题地发送和接收单个表单，但我不知道如何处理多个表单。

这是我的代码：

<div id="someId" class="someClass">
        <div th:each="someDiv, iterStat : ${someVar}"  >
            <form id="form" method="post" th:name="'form' + ${someVar.someVarId}" enctype="multipart/form-data">
            <div th:id="${someVar.someVarId}" name="someName">
                        <input   type="text" th:value="${someVar.someText}"/>
                    </div>
                </div>
                <center><label>radio button</label></center>
                    <input id="one"  type="radio" name="radioButton" value="0" th:checked="${someVar.radio} == 0"/>1
                    <input id="two"  type="radio" name="radioButton" value="1" th:checked="${someVar.radio} == 1"/>2
                <center><label>drop-down list</label></center>
                    <select id="dropList">
                        <option id="1" value="0" th:selected="${someVar.list} == 0">0</option>
                        <option id="2" value="1" th:selected="${someVar.list} == 1">1</option>
                        <option id="3" value="2" th:selected="${someVar.list} == 2">2</option>
                    </select>
                <input type="file" id="fileinput" />
            </div>
            </form>
        </div>
    </div>

JavaScript：

var  someName= $('div[name="someName"]');

var myForm = new FormData();
for(var i = 0; i < someName.length; i++) {

    myForm.append("var1", $(someName[i]).attr('id'));
    myForm.append("var2", $(someName[i]).find('input.form-control').val());
    myForm.append("var3", $(someName[i]).find('input[name=radioButton]:checked').val());
    myForm.append("var4", $(someName[i]).find('#dropList option:selected').val());
    myForm.append("file", $('#fileinput').prop('files')[0]);
}


$.ajax({
    type: "POST",
    contentType : false,
    processData: false,
    url: "/url",
    data: myForm,
    success: function(response) {
       console.log("success");

    }
});

Spring 控制器如下：

@PostMapping(value = "/url")
public ModelAndView update(@RequestParam("file") MultipartFile file) {
    System.out.println(file);
}

在控制器中，我想从某种数组中的表单接收所有信息，我可以遍历这些信息。

Answer 1

获取所有表单元素

var formsAll = document.querySelectorAll('form');

获取每个元素的表单数据

var formDataAll = formsAll.map(form => new FormData(form));

将数据传递给您的 ajax 处理程序

$.ajax({
  data: formDataAll
});