3

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

建议保险.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">，应该从整个页面中提取内容片段并将其传递给客户端。并没有真正理解它的含义。我该怎么处理这个？

我观察到的第二件事是它对 flow 进行了 2 次调用，一个是 Post 失败，另一个是 Get 返回响应。谁能解释为什么会这样？

4

2 回答 2

1

尝试添加&fragment=content到您的 ajax 调用中的 URL。可能会解决您的第一个问题。

您还可以发布您的“地址”流程的代码吗？

[编辑] 尝试为您使用 Spring.remoting.submitForm ajax：

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

看看这是否有效

于 2012-10-24T16:16:22.093 回答
1

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

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

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

瓷砖-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>
于 2012-10-27T15:34:06.270 回答