这是我在博客文章中遇到的一种方法:
我不想使用这些框架,因此在本节中,我使用jQuery将AJAX请求发送到服务器,等待响应并部分更新视图(片段渲染)。
表格
<form> <span >Guest list form</span> <div > <div > <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),将使用从服务器收到的响应进行更新。
当用户单击按钮时,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)}" id="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>该片段是一个具有已注册来宾的表,将被插入到结果块中。



