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

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

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

	<form action="http://localhost:8080/test/add" method="post" id="fm">
		<div class="content">
			<div class="item" th:each="paper, userStat:${paperList}">
				<div class="paper">
					<input type="hidden" name="uid" th:value="${paper.uid}" />
					<span>试题</span> <textarea type="text" name="content" th:text="${paper.question}"  readonly="true" style="resize:none" ></textarea>
				</div>
				
				<div class="answer">
					<span>答案</span> <textarea type="text" name="answer" th:text="${paper.content}"  style="resize:none" ></textarea>
				</div>
			</div>
		</div>
		<div class="submit">
			<input type="button"  id="submit" value="提交试卷" />
		</div>		
	</form>

下面是把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）首先需要引入相关的依赖。

    	<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
		
        <dependency> 
			<groupId>net.sourceforge.nekohtml</groupId> 
			<artifactId>nekohtml</artifactId> 
			<version>1.9.22</version> 
		</dependency> 

2）修改application.yml配置文件

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

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