Thymeleaf与Spring集成（第2部分）

1.简介

这是Thymeleaf与Spring教程集成的第二部分。您可以在此处阅读第一部分，在那里您将学习如何配置该项目。

如本教程第一部分开头所述，Web应用程序将发送两种类型的请求：

插入新访客：将同步请求发送到服务器以添加新访客。这将展示Thymeleaf如何与Spring的表单支持bean集成在一起。
列出来宾：发送AJAX请求，该请求将更新页面的区域（片段），以显示从服务器返回的来宾列表。

让我们看看我们将如何实现这一目标。

2.处理表格

在本节中，我们将了解如何使用Thymeleaf提交表单。我们基本上需要三个属性：

行动
th：对象
场

前两个在form元素中定义：

<form id="guestForm" th:action="@{/spring/guests/insert}" th:object="${guest}" method="post">

th：action属性重写操作URL，为应用程序上下文添加前缀。

表单元素中的th：object属性是对象选择。然后可以在表单中引用它。我们在这里所做的是将表单支持bean绑定到model属性，该属性是我们在呈现视图之前在控制器中定义的：

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

如我们所见， th：object是指Guest表单支持bean，而th：field是指其属性。看一下表单主体：

<span class="formSpan"><input id="guestId" type="text" th:field="*{id}" required="required"/><br /><label for="guestId" th:text="#{insert.id}">id:</label>
</span><span class="formSpan" style="margin-bottom:20px"><input id="guestName" type="text" th:field="*{name}" required="required"/><br /><label for="guestName" th:text="#{insert.name}">name:</label>
</span>

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><!-- Results block --><div id="resultsBlock"></div></div>
</form>

该表单包含带有搜索字符串（searchSurname）的输入文本，该文本将被发送到服务器。还有一个区域（resultsBlock div），将使用从服务器收到的响应进行更新。

searchForm

当用户单击按钮时，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>

该片段是一个具有已注册访客的表，将被插入到结果块中：

结果块