对 WebFlow 的 Ajax 调用答案

【问题标题】：Ajax call to WebFlow对 WebFlow 的 Ajax 调用
【发布时间】：2012-10-14 15:55:48
【问题描述】：

我正在尝试对我的 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;
});
}

流.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>

proposedInsured.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>

模板.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。谁能解释一下为什么会这样？

【问题讨论】：

标签： jquery ajax spring-webflow thymeleaf

【解决方案1】：

尝试将&fragment=content 添加到您的ajax 调用中的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>

看看有没有效果

【讨论】：

添加了&fragment=Content，但没有运气。此外，尝试传递参数 &ajaxSource=true，如 [stackoverflow.com/questions/10603177/ajax-spring-webflow]，始终获取完整页面作为响应。
我的地址流代码：<subflow-state id="address" subflow="address"> <transition on="saveAddress" to="nextpage"> <evaluate expression="policyOwnerBean.setAddressDetail(currentEvent.attributes.addressDetail)"/> </transition> </subflow-state>
我想你的父流“地址”中有一个<on-render> <render fragment="content"/> </on-render>，对吧？
它是&fragment=content，带有一个小写的c。您也可以发布您的父流程“地址”的代码吗？
在firstpage 上的 NextPage 提交按钮的单击事件中，正在触发我的 ajax 脚本，该脚本调用我的 proposedInsured 应该部分呈现。尚未达到地址流。是的，它是&fragment=content，小写c。

【解决方案2】：

将 Thymeleaf 与 Tiles 一起使用以使其正常工作。它不适用于普通的th:fragment。

要进行 ajax 调用，我们可以使用相关定义的 jquery 脚本（ajaxcall.js）或 spring JS：

   Spring.addDecoration(new Spring.AjaxEventDecoration({
    elementId: "print_message",
    event: "onclick",
    formId:"myForm",
    }));

tiles-def.xml

<tiles-definitions>
<definition name="base.definition"
    template="template">
    <put-attribute name="header" value="header :: header" />
    <put-attribute name="content" value="" />
    <put-attribute name="footer" value="footer :: footer" />
</definition> 

<definition name="firstPage" extends="base.definition">
    <put-attribute name="content" value="firstPage :: content" />
</definition>

<definition name="proposedInsured" extends="base.definition">
    <put-attribute name="content" value="proposedInsured :: content" />
</definition>

</tiles-definitions>

template.html（使用图块）

<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
 <title>Insert title here</title>
 <script type="text/javascript" th:src="@{/resources/dojo/dojo.js}"></script>
 <script type="text/javascript" th:src="@{/resources/spring/Spring.js}"></script>
 <script type="text/javascript" th:src="@{/resources/spring/Spring-Dojo.js}"> </script>
 <script type="text/javascript" th:src="@{/scripts/jquery-1.8.2.js}"></script>
 <script type="text/javascript" th:src="@{/scripts/ajaxcall.js}"></script> 
 <!-- <script type="text/javascript">
  Spring.addDecoration(new Spring.AjaxEventDecoration({
  elementId: "print_message",
  event: "onclick",
  formId:"myForm",
  }));
  </script>-->
 </head>
 <body>
 <table border="1">
  <tr>
     <td height="30" colspan="2">
       <div tiles:substituteby="header"></div>
     </td>
  </tr>
  <tr>
     <td width="350">
       <div tiles:substituteby="content"></div>
     </td>
  </tr>
  <tr>
     <td height="30" colspan="2">       
      <div tiles:substituteby="footer"></div>
     </td>
   </tr>
   </table>
   </body>
   </html>

【讨论】：