Spring MVC 3.2 Thymeleaf Ajax 片段 [英] Spring MVC 3.2 Thymeleaf Ajax Fragments

查看：31
本文介绍了Spring MVC 3.2 Thymeleaf Ajax 片段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 Spring MVC 3.2 和 Thymeleaf 模板引擎构建应用程序.我是 Thymeleaf 的初学者.

我一切正常，包括 Thymeleaf，但我想知道是否有人知道关于如何对控制器执行简单的 Ajax 请求并仅呈现模板(片段)的一部分的简单而清晰的教程.

我的应用程序已配置所有内容(Spring 3.2、spring-security、thymeleaf 等)并且按预期工作.现在我想做 Ajax 请求(使用 jQuery 非常简单，但我不想使用它，因为 Thymeleaf 在其教程第 11 章:渲染模板片段(link) 提到它可以用片段来完成.

目前我的控制器中有

@RequestMapping("/dimensionMenuList")公共字符串 showDimensionMenuList(模型模型){合集<ArticleDimensionVO>物品尺寸；尝试 {articleDimensions = articleService.getArticleDimension(ArticleTypeVO.ARTICLE_TYPE);} catch (DataAccessException e) {//TODO: 返回错误抛出新的运行时异常()；}model.addAttribute("dimensions", articleDimensions);返回/admin/index :: 维度菜单列表"；}

我想替换<ul></ul>菜单项的视图部分:

    <li th:unless="${#lists.isEmpty(dimensions)}" th:each="dimension : ${dimensions}"><a href="#" th:text="${dimension.dimension}"></a>

非常感谢任何线索.特别是如果我不必包含更多框架.对于 Java Web 应用程序来说，这已经太多了.

解决方案

这是我在 博文:

我不想使用这些框架，因此在本节中，我使用 jQuery 向服务器发送 AJAX 请求，等待响应并部分更新视图(片段渲染).

表格

<span class="subtitle">客人名单表格</span><div class="listBlock"><div class="search-block"><input type="text" id="searchSurname" name="searchSurname"/><br/><label for="searchSurname" th:text="#{search.label}">搜索标签:</label><button id="searchButton" name="searchButton" onclick="retrieveGuests()" type="button"th:text="#{search.button}">搜索按钮</button>

<!-- 结果块--><div id="resultsBlock">

</表单>

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

当用户点击按钮时，retrieveGuests() 函数将被调用.

function retrieveGuests() {var url = '/th-spring-integration/spring/guests';如果 ($('#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));返回结果::结果列表"；}@RequestMapping(value = "/guests", method = RequestMethod.GET)公共字符串 showGuestList(模型模型){model.addAttribute("guests", hotelService.getGuestsList());返回结果::结果列表"；}

由于 Spring 与 Thymeleaf 集成，它现在可以返回 HTML 片段.在上面的示例中，返回字符串results :: resultsList"指的是位于结果页面中的名为 resultsList 的片段.我们来看看这个结果页面:

<html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org" lang="en"><头><身体><div th:fragment="resultsList" th:unless="${#lists.isEmpty(guests)}" id="results-block"><表格><头><tr><th th:text="#{results.guest.id}">Id</th><th th:text="#{results.guest.surname}">Surname</th><th th:text="#{results.guest.name}">姓名</th><th th:text="#{results.guest.country}">国家</th></tr></thead><tr th:each="guest : ${guests}"><td th:text="${guest.id}">id</td><td th:text="${guest.surname}">姓</td><td th:text="${guest.name}">name</td><td th:text="${guest.country}">国家</td></tr></tbody>

片段是一个包含注册客人的表格，将被插入到结果块中.

I'm building application with Spring MVC 3.2 and Thymeleaf templating engine. I'm a beginner in Thymeleaf.

I have everything working, including Thymeleaf but I was wondering if anyone knows of a simple and clear toturial on how to do simple Ajax request to controller and in result rendering only a part of a template (fragment).

My app has everything configured (Spring 3.2, spring-security, thymeleaf, ...) and works as expected. Now I would like to do Ajax request (pretty simple with jQuery but I don't wan't to use is since Thymeleaf in its tutorial, chapter 11: Rendering Template Fragments (link) mentiones it can be done with fragments.

Currently I have in my Controller

@RequestMapping("/dimensionMenuList")
public String showDimensionMenuList(Model model) {

    Collection<ArticleDimensionVO> articleDimensions;
    try {
        articleDimensions = articleService.getArticleDimension(ArticleTypeVO.ARTICLE_TYPE);
    } catch (DataAccessException e) {
        // TODO: return ERROR
        throw new RuntimeException();
    }

    model.addAttribute("dimensions", articleDimensions);

    return "/admin/index :: dimensionMenuList";
}

the part of the view where I would like to replace <ul></ul> menu items:

<ul th:fragment="dimensionMenuList" class="dropdown-menu">
    <li th:unless="${#lists.isEmpty(dimensions)}" th:each="dimension : ${dimensions}">
        <a href="#" th:text="${dimension.dimension}"></a>
    </li>
</ul>

Any clue is greatly appreciated. Especially if I don't have to include any more frameworks. It's already too much for java web app as it is.

解决方案

Here is an approach I came across in a blog post:

I didn't want to use those frameworks so in this section I'm using jQuery to send an AJAX request to the server, wait for the response and partially update the view (fragment rendering).

The Form

<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>

This form contains an input text with a search string (searchSurname) that will be sent to the server. There's also a region (resultsBlock div) which will be updated with the response received from the server.

When the user clicks the button, the retrieveGuests() function will be invoked.

function retrieveGuests() {
    var url = '/th-spring-integration/spring/guests';

    if ($('#searchSurname').val() != '') {
        url = url + '/' + $('#searchSurname').val();
    }

    $("#resultsBlock").load(url);
}

The jQuery load function makes a request to the server at the specified url and places the returned HTML into the specified element (resultsBlock div).

If the user enters a search string, it will search for all guests with the specified surname. Otherwise, it will return the complete guest list. These two requests will reach the following controller request mappings:

@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";
}

Since Spring is integrated with Thymeleaf, it will now be able to return fragments of HTML. In the above example, the return string "results :: resultsList" is referring to a fragment named resultsList which is located in the results page. Let's take a look at this results page:

<!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>

The fragment, which is a table with registered guests, will be inserted in the results block.

这篇关于Spring MVC 3.2 Thymeleaf Ajax 片段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆