Spring MVC 3.2 Thymeleaf Ajax Fragments

Я создаю приложение с Spring MVC 3.2 и Thymeleaf templating engine. Я новичок в Тимелеафе.

У меня все работает, в том числе 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 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, как есть.

Ответ 1

Вот такой подход, который я нашел в сообщении в блоге:

Я не хотел использовать эти фреймворки, поэтому в этом разделе я использую 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), которая будет отправлена на сервер. Также существует область (resultBlock div), которая будет обновляться с ответом, полученным от сервера.

Когда пользователь нажимает кнопку, будет вызвана функция retrieveGuests().

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

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

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

Функция загрузки jQuery делает запрос на сервер по указанному URL-адресу и помещает возвращенный HTML в указанный элемент (resultBlock 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>

В блок результатов будет вставлен фрагмент, который представляет собой таблицу с зарегистрированными посетителями.

Ответ 2

Только рендеринг Thymeleaf fragments также хорошо работает с ModelAndView.

Ваш контроллер

@RequestMapping(value = "/feeds", method = RequestMethod.GET)
public ModelAndView getFeeds() {
    LOGGER.debug("Feeds method called..");
    return new ModelAndView("feeds :: resultsList");
}

Ваше мнение

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">

<head></head>
<body>
    <div th:fragment="resultsList" id="results-block">
        <div>A test fragment</div>
        <div>A test fragment</div>
    </div>
</body>
</html>

Что действительно отображалось

<div id="results-block">
    <div>A test fragment</div>
    <div>A test fragment
    </div>
</div>