ajax传递数组_springboot项目中，前端如何传递一个自定义对象数组给后端

今天在使用spring boot自带的thymeleaf模板时候，想通过form表单传递一个自定义数组对象给后端接收。可是一直出现问题，后面经过查阅资料后，发现需要把form表单提交的方式，改成ajax方法提交

这个是form表单部分，通过foreach循环，得到多个实体对象

试题

答案

下面是把form提交，改成ajax提交方式，手续爱你通过serializeArray()得到序列化数组，然后在对每一条记录进行处理。

$(function() {function paperTemplate(uid, question, content){    var paper = new Object();    paper.uid = uid;    paper.question = question;    paper.content = content;    return paper;}$("#submit").click(function() {var paperArray = $('#fm').serializeArray();var paperList = new Array();for(var i = 0; i < paperArray.length / 3; i++) {paperList.push(paperTemplate(paperArray[3*i].value, paperArray[3*i + 1].value, paperArray[3*i + 2].value))}    $.ajax({              type: "POST",   //提交的方法            url:"http://localhost:8080/test/add", //提交的地址              data:JSON.stringify(paperList),// 序列化表单值              async: false,            contentType: "application/json;charset=utf-8",//这个参数也是header参数            error: function(request) {  //失败的话                 alert("Connection error");              },              success: function(data) {  //成功                 alert(data.data);  //就将返回的数据显示出来              }           });      });})

最后，后端代码为

@ApiOperation(value="新增测试", notes="新增测试")@ResponseBody@PostMapping(value="/add")public String add(@RequestBody Paper [] paperList) {for(Paper paper : paperList) {String uid = paper.getUid();Paper savaPaper = paperService.getById(uid);if (savaPaper != null && paper.getContent() != null) {savaPaper.setContent(paper.getContent());paperService.updateById(savaPaper);}}log.info("提交成功");return ResultUtil.result(SysConf.SUCCESS, "提交成功");}

最终通过google浏览器network能够看到，提交的数据

最后还需要注意的一个问题就是thymeleaf在进行编译检测的时候，会很容易编译出错，导致网页不能正常访问。通过查阅资料，发现了这句话。

说明：使用springboot的thymeleaf模板时默认会对HTML进行严格的检查,导致当你的标签没有闭合时就会通不过。nekohtml这个依赖可以解决这一问题。

1)首先需要引入相关的依赖。

    org.springframework.boot            spring-boot-starter-thymeleaf        net.sourceforge.nekohtml nekohtml 1.9.22

2)修改application.yml配置文件

spring:   thymeleaf:    cache: true   #关闭缓存    mode: LEGACYHTML5

3) 执行mvn clean install 重新打包启动就可以解决了