thymeleaf前后端交互
编程方法论 人气:01. 引入静态资源: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
加载全部内容