这篇“thymeleaf中前后端数据交互怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“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中前后端数据交互怎么实现”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。