Spring MVC 3.2 Thymeleaf Ajax片段

问题内容：

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

我可以进行所有工作，包括Thymeleaf，但我想知道是否有人知道如何对控制器执行简单的Ajax请求，从而仅呈现模板（片段）的一部分。

我的应用程序已配置了所有内容（Spring 3.2，spring-
security，thymeleaf等），并且按预期工作。现在，我想执行Ajax请求（使用jQuery非常简单，但我不想使用，因为Thymeleaf在其教程的第11章：渲染模板片段（链接）中提到可以使用片段来完成。

目前我在控制器中

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

我要替换<ul></ul>菜单项的视图部分：

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

任何线索将不胜感激。特别是如果我不必再包含任何框架。对于Java Web应用程序而言，它已经太多了。

问题答案：

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

我不想使用这些框架，因此在本节中，我使用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），将使用从服务器收到的响应进行更新。

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

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

Spring MVC 3.2 Thymeleaf Ajax片段

微信关注