我正在尝试对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>


看看是否可行

10-06 12:41
查看更多