SpringMVC3.2ThymeleafAjax片段_Ajax_Spring_Spring Mvc_Thymeleaf

SpringMVC3.2ThymeleafAjax片段

ajax spring spring-mvc

SpringMVC3.2ThymeleafAjax片段,ajax,spring,spring-mvc,thymeleaf,Ajax,Spring,Spring Mvc,Thymeleaf,我正在用SpringMVC3.2和Thymeleaf模板引擎构建应用程序。我是百里香的初学者我有一切工作，包括Thymeleaf，但我想知道是否有人知道一个简单而清晰的toturial，关于如何对控制器执行简单的Ajax请求，并且结果只呈现模板（片段）的一部分我的应用程序已经配置好了一切（Spring3.2、SpringSecurity、thymeleaf等等），并按预期工作。现在我想做Ajax请求（jQuery非常简单，但我不想使用is），因为Thymeleaf在其教程第11章：呈现模板片

我正在用SpringMVC3.2和Thymeleaf模板引擎构建应用程序。我是百里香的初学者

我有一切工作，包括Thymeleaf，但我想知道是否有人知道一个简单而清晰的toturial，关于如何对控制器执行简单的Ajax请求，并且结果只呈现模板（片段）的一部分

我的应用程序已经配置好了一切（Spring3.2、SpringSecurity、thymeleaf等等），并按预期工作。现在我想做Ajax请求（jQuery非常简单，但我不想使用is），因为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";
}

@RequestMapping（“/dimensionMenuList”）
公共字符串showDimensionMenuList（模型）{
收集

非常感谢您提供任何线索。特别是如果我不必再包含任何框架的话。对于java web app来说，这已经太多了。

以下是我在一篇文章中遇到的一种方法：

我不想使用这些框架，因此在本节中，我将使用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>

jQuery load函数在指定的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与Spring集成后，它就能够返回HTML片段。在上面的例子中，返回字符串“结果：：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>


身份证件
姓
名称
国家
身份证件
姓
名称
国家

片段是包含已注册来宾的表，将插入结果块。

仅渲染

Thymeleaf片段

也适用于

ModelAndView

你的控制器

你的观点


测试片段
测试片段

实际渲染的是什么


测试片段
测试片段

作为Sohail伟大答案的替代版本，我想给出一个版本，使用javascript可以将整个th:对象发送到控制器，将Thymeleaf集成到表单中，而不必使用@PathVariable，当表单包含多个字段时，它会变得凌乱或根本不可用

对于表单（使用一个示例，该示例返回一个具有id和名称字符串的对象，并向组合框提供一个映射，其中一些对象作为值），我们有：

这就是一切。在ajax版本中，调用在每个表单之后添加拦截器的函数。

它会刷新页面吗？取决于调用方式。如果是ajax调用，页面不会刷新，否则会刷新。我非常喜欢这个。我试过返回视图名称的方法，它也能工作。如下所示：

public String getFeeds（）{return“feeds:：resultsList”；}

如何返回多个片段？？？@AbdullahKhan

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

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

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

<form method="post" th:action="@{/yourMapping}" th:object="${object}" id="yourFormId">
    <select th:field="*{mapOfObjects}">
       <option 
          th:each="entry: ${mapOfObjects}"
          th:value="${entry.value.id}"
          th:text="${entry.value.name}" >
       </option>
    </select>

    <p>Name: 
       <input type="text" th:field="*{name}" />
    </p>
</form>

<script>formInterceptor("yourFormId");</script>

<script>
function formInterceptor(formName) {
    var $form = $("#" + formName);

    $form.on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url : $form.attr('action'),
            type : 'post',
            data : $form.serialize(),
            success : function(response) {
                if ($(response).find('.has-error').length) {
                    $form.replaceWith(response);
                }
                else{
                    $("#ajaxLoadedContent").replaceWith(response);
                }
            }
        });
    });
};
</script>

<div id="ajaxLoadedContent"></div>

@PostMapping(value = /yourMapping)
public String ajaxCtrlExample(@ModelAttribute("object") Object object, Model model) {
    return yourFragmentPath;
}