Spring MVC 3.2 Thymeleaf Ajax碎片

我正在用Spring MVC 3.2和Thymeleaf模板引擎構建應用程序。我是Thymeleaf的初學者。Spring MVC 3.2 Thymeleaf Ajax碎片

我有一切工作，包括Thymeleaf，但我想知道如果有人知道如何做簡單的Ajax請求控制器和結果呈現模板（片段）的一部分簡單明瞭toturial。

我的應用程序配置了一切（Spring 3.2，spring-security，thymeleaf，...）並按預期工作。現在我想要做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 web應用程序來說已經太多了。

來源

2014-01-07 y0gie007

這裏是我碰到的一個辦法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）輸入文本。還有一個區域（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"; 
}

由於彈簧與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>

的片段，這是註冊客人表，將在結果塊插入。

來源

2014-03-27 03:51:53 Sohail

僅渲染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>

來源

2016-07-25 09:06:08

它是否會刷新頁面？ – kamaci

取決於你打電話的方式。如果它的ajax調用頁面不會刷新，否則它會。 –

我真的很喜歡這個。我試圖返回視圖名稱的方法，它也可以。像這樣：'public String getFeeds（）{return「feeds :: resultsList」; }' –

Spring MVC 3.2 Thymeleaf Ajax碎片

回答

相關問題