这篇文章主要介绍了thymeleaf中前后端数据交互小结,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
1. 引入静态资源:th:href或th:scr+@{/从static目录开始}
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link th:href="@{/iamges/favicon.ico}" rel="external nofollow" type="image/x-icon"/>
<link th:href="@{/css/bootstrap.min.css}" rel="external nofollow" rel="stylesheet"/>
<meta charset="UTF-8">
<title>书籍管理</title>
</head>
2.前端将数据绑定到后端对象:*{对象属性},前端引用后端数据${对象属性}
<div class="form-group">
<label for="book_name" class="col-sm-2 control-label">书名:</label>
<div class="col-xs-4">
<input type="text" class="form-control" id="book_name"
name="name" th:value="${book.name}" th:field="*{book.name}"/>
</div>
</div>
3.后端将数据传入前端 ModelMap(由框架提供),前端使用${对象属性}
@RequestMapping(value = "/create",method = RequestMethod.GET)
public String createBookForm(ModelMap map){
map.addAttribute("book",book);
map.addAttribute("action","create");
return BOOK_FORM;
}
4.表单提交的注意点。
- action:表单中的内容提交给哪个页面进行处理,可能的取值:URL
- input元素:输入框,由
type
决定类型。 - 触发提交的动作:
- HTML DOM submit() 方法。
- type=submit
- button
到此这篇关于thymeleaf中前后端数据交互小结的文章就介绍到这了,更多相关thymeleaf前后端数据内容请搜索编程学习网以前的文章希望大家以后多多支持编程学习网!
沃梦达教程
本文标题为:thymeleaf中前后端数据交互方法汇总
基础教程推荐
猜你喜欢
- Java并发编程进阶之线程控制篇 2023-03-07
- Java实现查找文件和替换文件内容 2023-04-06
- Java数据结构之对象比较详解 2023-03-07
- springboot自定义starter方法及注解实例 2023-03-31
- java实现多人聊天系统 2023-05-19
- JDK数组阻塞队列源码深入分析总结 2023-04-18
- java基础知识之FileInputStream流的使用 2023-08-11
- Java文件管理操作的知识点整理 2023-05-19
- Java实现线程插队的示例代码 2022-09-03
- ConditionalOnProperty配置swagger不生效问题及解决 2023-01-02