當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Thymeleaf与Spring集成（第2部分）

發布時間：2023/12/3 javascript 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 Thymeleaf与Spring集成（第2部分）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.簡介

這是Thymeleaf與Spring教程集成的第二部分。您可以在此處閱讀第一部分，在那里您將學習如何配置該項目。

如本教程第一部分開頭所述，Web應用程序將發送兩種類型的請求：

插入新訪客：將同步請求發送到服務器以添加新訪客。這將展示Thymeleaf如何與Spring的表單支持bean集成在一起。
列出來賓：發送AJAX請求，該請求將更新頁面的區域（片段），以顯示從服務器返回的來賓列表。

讓我們看看我們將如何實現這一目標。

2.處理表格

在本節中，我們將了解如何使用Thymeleaf提交表單。我們基本上需要三個屬性：

行動

th：對象

場

前兩個在form元素中定義：

th：action屬性重寫操作URL，為應用程序上下文添加前綴。

表單元素中的th：object屬性是對象選擇。然后可以在表單中引用它。我們在這里所做的是將表單支持bean綁定到model屬性，該屬性是我們在呈現視圖之前在控制器中定義的：

@ModelAttribute("guest") public Guest prepareGuestModel() {return new Guest(); }

如我們所見， th：object是指Guest表單支持bean，而th：field是指其屬性。看一下表單主體：

th：field將要做的就是將其輸入元素的值分配給backing bean屬性。因此，當用戶提交表單時，所有這些th：field都將設置表單支持bean屬性。

在控制器處，我們將收到Guest實例：

@RequestMapping(value = "/guests/insert", method = RequestMethod.POST) public String insertGuest(Guest newGuest, Model model) {hotelService.insertNewGuest(newGuest);return showHome(model); }

現在，可以將訪客插入數據庫。

3.發送AJAX請求

當試圖找到一個通過Thymeleaf發送AJAX請求的簡單示例時，我發現了Spring Webflow（渲染片段）示例。我還讀過其他文章，說您需要Tiles才能完成此任務。

我不想使用這些框架，因此在本節中，我使用jQuery將AJAX請求發送到服務器，等待響應并部分更新視圖（片段渲染）。

表格

<form><span class="subtitle">Guest list form</span><div class="listBlock"><div class="search-block"><input type="text" id="searchSurname" name="searchSurname"/><br /><label for="searchSurname" th:text="#{search.label}">Search label:</label><button id="searchButton" name="searchButton" onclick="retrieveGuests()" type="button" th:text="#{search.button}">Search button</button></div><div id="resultsBlock"></div></div> </form>

該表單包含帶有搜索字符串（searchSurname）的輸入文本，該文本將被發送到服務器。還有一個區域（resultsBlock div），將使用從服務器收到的響應進行更新。

當用戶單擊按鈕時，retrieveGuests（）函數將被調用。

function retrieveGuests() {var url = '/th-spring-integration/spring/guests';if ($('#searchSurname').val() != '') {url = url + '/' + $('#searchSurname').val();}$("#resultsBlock").load(url); }

jQuery 加載函數以指定的url向服務器發出請求，并將返回HTML放入指定的元素（resultsBlock div）。

如果用戶輸入搜索字符串，它將搜索具有指定姓氏的所有來賓。否則，它將返回完整的來賓列表。這兩個請求將到達以下控制器請求映射：

@RequestMapping(value = "/guests/{surname}", method = RequestMethod.GET) public String showGuestList(Model model, @PathVariable("surname") String surname) {model.addAttribute("guests", hotelService.getGuestsList(surname));return "results :: resultsList"; }@RequestMapping(value = "/guests", method = RequestMethod.GET) public String showGuestList(Model model) {model.addAttribute("guests", hotelService.getGuestsList());return "results :: resultsList"; }

由于Spring與Thymeleaf集成在一起，因此它現在能夠返回HTML片段。在上面的示例中，返回字符串“ results :: resultsList”是指位于結果頁面中的名為resultsList的片段。讓我們看一下這個結果頁面：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org" lang="en"><head> </head><body><div th:fragment="resultsList" th:unless="${#lists.isEmpty(guests)}" class="results-block"><table><thead><tr><th th:text="#{results.guest.id}">Id</th><th th:text="#{results.guest.surname}">Surname</th><th th:text="#{results.guest.name}">Name</th><th th:text="#{results.guest.country}">Country</th></tr></thead><tbody><tr th:each="guest : ${guests}"><td th:text="${guest.id}">id</td><td th:text="${guest.surname}">surname</td><td th:text="${guest.name}">name</td><td th:text="${guest.country}">country</td></tr></tbody></table></div> </body> </html>

該片段是一個具有已注冊訪客的表，將被插入到結果塊中：

4。結論

集成了兩個框架之后，我們學習了如何將表單鏈接到Spring MVC模型。我們還學習了如何發送AJAX請求和部分更新視圖。

參考：來自XavierPadró博客博客的JCG合作伙伴 Xavier Padro 與Thymeleaf與Spring的集成（第2部分）。

翻譯自: https://www.javacodegeeks.com/2014/03/thymeleaf-integration-with-spring-part-2.html

總結

以上是生活随笔為你收集整理的Thymeleaf与Spring集成（第2部分）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。