我正在尝试使用 spring mvc 3.1、tiles 2 和 jquery 对我的网站进行部分渲染。
这是我的 Spring session :
<beans:bean class="org.springframework.js.ajax.AjaxUrlBasedViewResolver">
<beans:property name="viewClass" value="org.springframework.js.ajax.tiles2.AjaxTilesView"/>
</beans:bean>
我的图 block 配置:
<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重新渲染该页面。
我的 Controller :
@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:
产品搜索.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);
}
});
});
事情是这样的:每次我更改 productsSearchResults.jsp 页面中的“searchCriteria.resultsSort”选择器值时,我希望重新加载结果图 block (而不重新加载整个页面)。
使用上面给出的代码,我设法重新渲染整个页面(包括 html 标签...),而不仅仅是我感兴趣的部分。
关于如何实现我的目标有什么提示吗?真的有可能还是我误解了部分渲染原理?
最佳答案
我发现出了问题,所以我正在回答我自己的问题...
我刚刚将 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”选择器似乎不再映射到表单,所以我还必须将此行添加到我的 Controller 中:
model.addAttribute("searchCriteria", searchformBean.getSearchCriteria());
仅此而已!希望对其他人有帮助。
关于jquery - SpringMVC、jquery、tiles 和部分重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9266560/