Spring MVC 3.2 Thymeleaf Ajax Fragments

Question

Я создаю приложение с пружинным MVC 3.2 и тимэлеафским шаблоном для моделирования. Я новичок в Тимелеафе.

У меня есть все работает, в том числе Thymeleaf, но мне было интересно, знает ли кто-нибудь о простой и понятной тоталитаризации о том, как сделать простой запрос Ajax контроллеру, а в результате - только часть шаблона (фрагмента).

Мое приложение имеет все настроенное (весна 3.2, весна-безопасность, тимэлет, ...) и работает так, как ожидалось. Теперь я хотел бы сделать запрос Ajax (довольно простой с jQuery, но я не хочу его использовать, так как Thymeleaf в его учебнике, глава 11: Рендеринг фрагментов шаблона (link) упоминает, что это можно сделать с помощью фрагментов.

в настоящее время у меня есть в моем контроллере

@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, как есть.

Answer 1

Вот подход, который я наткнулся в blog post:

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

Если пользователь вводит строку поиска, он будет искать всех гостей с указанной фамилией. В противном случае он вернет полный список гостей. Эти два запроса достигнут следующих отображений запроса контроллера:

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

С весной интегрирован с 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> 

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

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