thymeleaf中前後端數據交互方法匯總

Posted on by

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前後端數據內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：