SpringMVC、jquery、tiles 和部分重新渲染

Question

我正在尝试使用 spring mvc 3.1、tiles 2 和 jquery 对我的网站进行部分渲染。

这是我的 spring conf ：

<beans:bean class="org.springframework.js.ajax.AjaxUrlBasedViewResolver">
   <beans:property name="viewClass" value="org.springframework.js.ajax.tiles2.AjaxTilesView"/>
</beans:bean>

我的tiles conf ：

<definition name="productSearch" extends="baseLayout">
    <put-attribute name="mainSection">
        <definition template="/WEB-INF/views/productSearch.jsp">
            <put-attribute name="productSearchResults" value="/WEB-INF/views/productSearchResults.jsp" />
        </definition>
    </put-attribute>
</definition>

如您所见，有一个名为“productSearchResults”的嵌套属性。这是结果页面，我希望通过ajax重新渲染该页面。

我的控制器：

@RequestMapping(params = "search=true", value = "/", method = RequestMethod.POST)
public String searchHandler(@Valid final SearchFormBean searchformBean, final Model model) {
    model.addAttribute("productsList", productsService.findProducts(searchformBean.getSearchCriteria()));
    return "productsSearch";
}

我的jsps：

productSearch.jsp：

<form:form id="product-search-form" method="post" modelAttribute="productSearchFormBean">
    <input type="hidden" name="search" value="" />
    <form:input path="searchCriteria.name" />
    // AND SOME OTHER FIELDS...
    <button type="submit" onclick="this.form.search.value='true';">Search</button>
</form>

productSearchResults.jsp：

<div id="products-result">
    <div id="search-results-info" class="section-content">
            Order results :
        <form:select path="searchCriteria.resultsSort">
            <form:option value="orderByName">Name</form:option>
            <form:option value="orderByDame">Date</form:option>
        </form:select>
    </div>

    <div id="products-content" class="section-content">                 
        <c:forEach var="product" items="${productsList}">
            <article>
                // PRODUCT INFORMATIONS DISPLAYED HERE...
            </article>
        </c:forEach>
    </div>
</div>

最后是productSearch.jsp中包含的.js文件：

$('select[id="searchCriteria.resultsSort"]').change(function() {
    $.ajax({
        type : "POST",
        url : "/myapp/product/search/",
        data : "search=true&fragments=productSearchResults",
        success : function(response) {
            $("#search-results").html(response);
        },
        error : function(e) {
            alert('Error : ' + e);
        }
    });
});

所以事情是这样的：每次我更改productSearchResults.jsp中的“searchCriteria.resultsSort”选择器值时页面，我希望重新加载结果图块（而不重新加载整个页面）。

使用上面给出的代码，我设法重新渲染整个页面（包括 html 标签...），而不仅仅是我感兴趣的部分。

关于如何实现我的目标有任何提示吗？真的有可能还是我误解了部分渲染原理？

Answer 1

我发现出了什么问题，所以我正在回答我自己的问题...

我刚刚将 javascript 代码更改为：

$('select[id="searchCriteria.resultsSort"]').change(function() {
$.ajax({
    type : "POST",
    beforeSend : function(req) {
        req.setRequestHeader("Accept", "text/html;type=ajax");
    },
    url : "/myapp/product/search/",
    data : "search=true&fragments=productSearchResults",
    success : function(response) {
        $("#search-results").html(response);
    },
    error : function(e) {
        alert('Error : ' + e);
    }
});
});

现在它可以工作了！

由于部分重新渲染，一旦页面重新加载到屏幕，“searchCriteria.resultsSort”选择器似乎不再映射到表单，所以我还必须将此行添加到我的控制器中：

model.addAttribute("searchCriteria", searchformBean.getSearchCriteria());

仅此而已！希望它能帮助其他人。