网站首页 > 技术文章 正文
今天在使用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 重新打包启动就可以解决了
猜你喜欢
- 2025-06-10 前端流式输出(前端流式输出效果)
- 2025-06-10 前端基础进阶(一):内存空间详细图解
- 2025-06-10 JavaScript数组中slice、concat方法真的是深拷贝吗?
- 2025-06-10 Set代替Array去重,实测性能对比(set方法数组去重)
- 2025-06-10 JavaScript去除数组重复元素的几种方法
- 2025-06-10 Vue短文:如何使用v-for反转数组的顺序?
- 2025-06-10 判断变量是否为数组(如何判断某变量是否为数组数据类型)
- 2025-06-10 JavaScript数组剖析(js 数组处理方法)
- 2024-09-30 JavaScript数组_数组方法「二」(二十七)
- 2024-09-30 table组件,前端如何使用table组件打印数组数据
你 发表评论:
欢迎- 588℃几个Oracle空值处理函数 oracle处理null值的函数
- 580℃Oracle分析函数之Lag和Lead()使用
- 569℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 567℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 561℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 553℃【数据统计分析】详解Oracle分组函数之CUBE
- 539℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 535℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)