栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

Spring MVC 3.2 Thymeleaf Ajax片段

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Spring MVC 3.2 Thymeleaf Ajax片段

这是我在博客文章中遇到的一种方法:

我不想使用这些框架,因此在本节中,我使用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>

该片段是一个具有已注册来宾的表,将被插入到结果块中。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/435498.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号