springboot項目中,前端如何傳遞一個自定義對象數組給後端

今天在使用spring boot自帶的thymeleaf模板時候,想通過form表單傳遞一個自定義數組對象給後端接收。可是一直出現問題,後面經過查閱資料後,發現需要把form表單提交的方式,改成ajax方法提交

這個是form表單部分,通過foreach循環,得到多個實體對象

<code>/<code>

下面是把form提交,改成ajax提交方式,手續愛你通過serializeArray()得到序列化數組,然後在對每一條記錄進行處理。

<code>$(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);  //就將返回的數據顯示出來              }           });      });})/<code>

最後,後端代碼為

<code>@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, "提交成功");}/<code>

最終通過google瀏覽器network能夠看到,提交的數據

springboot項目中,前端如何傳遞一個自定義對象數組給後端

最後還需要注意的一個問題就是thymeleaf在進行編譯檢測的時候,會很容易編譯出錯,導致網頁不能正常訪問。通過查閱資料,發現了這句話。

說明:使用springboot的thymeleaf模板時默認會對HTML進行嚴格的檢查,導致當你的標籤沒有閉合時就會通不過。nekohtml這個依賴可以解決這一問題

1)首先需要引入相關的依賴。

<code>    <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> /<code>

2)修改application.yml配置文件

<code>spring:   thymeleaf:    cache: true   #關閉緩存    mode: LEGACYHTML5/<code>

3) 執行mvn clean install 重新打包啟動就可以解決了


分享到:


相關文章: