我正在尝试对Webflow进行Ajax调用,并且只希望针对每个视图状态仅刷新页面内容部分。
function proposedInsured(){
("#myForm").submit(function() {
$.ajax({
type: "POST",
data: $("#myForm").serialize(),
url: $("#myForm").attr("action") + "&_eventId=nextpage&ajaxSource=print_message",
success: function(response) {
alert("success" + response);
$('#content').html(response);
},
error: function(response) {
alert("error" + response);
}
});
return false;
});
}
flow.xml
<view-state id="firstPage" view="firstPage" >
<transition on="nextpage" to="proposedInsured"/>
</view-state>
<view-state id="proposedInsured" model="policyBean" view="proposedInsured">
<binder>
<binding property="name" />
</binder>
<on-entry>
<evaluate expression="pocContent.getContent('proposedInsured',productId)" result="flowScope.content"/>
<render fragments="content"/>
</on-entry>
<transition on="nextpage" to="address" />
</view-state>
<subflow-state id="address" subflow="address">
<transition on="saveAddress" to="nextpage">
<evaluate expression="policyBean.setAddressDetail(currentEvent.attributes.addressDetail)"/>
</transition>
</subflow-state>`
在首页上的NextPage提交按钮的单击事件上,触发了我的ajax脚本,该脚本调用了我的webFlow。
firstPage(将Thymeleaf2.0.12用于视图部分)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<body>
<div id="content" tiles:fragment="content">
<form id="myForm" method="post" th:action="${flowExecutionUrl}">
<input id="print_message" type="button" value="NextPage" name="_eventId_nextPage" onclick="proposedInsured();"/>
</form>
</div>
</body>
</html>
proposalInsured.html
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<body>
<div id="content" tiles:fragment="content">
<form id="myForm" name="myForm" method="POST">
...
</form>
</div>
</body>
</html>
template.html
<div id="page-container">
<div id="header" th:fragment="header">
...
</div>
<div id="content" th:fragment="content">
....
</div>
</div>
问题:获取整个页面(标题和内容)以响应我的Ajax调用。根据我的理解
<render fragment="content">
应该从整个页面中提取内容片段,并将其传递给客户端。没有真正得到它的意思。我应该如何处理呢?我观察到的第二件事是它使2个调用流,一个是Post失败,另一个是Get,它向我返回响应。谁能解释为什么会这样吗?
最佳答案
尝试在Ajax调用中将&fragment=content
添加到URL。可能会解决您的第一个问题。
您还可以为您的“地址”流程发布代码吗?
[编辑]尝试为您的Ajax使用Spring.remoting.submitForm:
<input type="submit" value="NextPage" name="_eventId_nextPage" id="submitMyForm" onclick="Spring.remoting.submitForm('submitMyForm', 'myForm', {fragments:'content'}); return false;"/>
或AjaxEventDecoration:
<script type="text/javascript">
Spring.addDecoration(new Spring.AjaxEventDecoration({
elementId: "submitMyForm",
event: "onclick",
formId: "myForm",
params: {fragments: "content"}
}));
</script>
看看是否可行