天在使用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 重新打包啟動就可以解決了