Jquery 对WebFlow的Ajax调用_Jquery_Ajax_Spring Webflow_Thymeleaf

Jquery 对WebFlow的Ajax调用

jquery ajax

Jquery 对WebFlow的Ajax调用,jquery,ajax,spring-webflow,thymeleaf,Jquery,Ajax,Spring Webflow,Thymeleaf,我试图对我的webflow进行Ajax调用，并且只想针对每个视图状态刷新页面的内容部分 function proposedInsured(){ ("#myForm").submit(function() { $.ajax({ type: "POST", data: $("#myForm").serialize(), url: $("#myForm").attr("action") + "&_eventId=nextpage&ajax

我试图对我的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 submit按钮的事件时，我启动了我的ajax脚本，该脚本调用了我的webFlow

首页（视图部分使用AF2.0.12）

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>

...

template.html

<div id="page-container">
<div id="header" th:fragment="header">
...
</div>
<div id="content" th:fragment="content">
    ....
</div>
</div>


...
....

问题：获取整个页面（标题和内容）以响应我的Ajax调用。根据我的理解

应该从整个页面中提取内容片段并将其传递给客户端。没有真正理解它的意义。我该怎么处理这件事

我观察到的第二件事是它对flow进行了两次调用，一次是Post，失败了，另一次是Get，返回响应。有人能解释一下为什么会发生这种情况吗？

尝试在ajax调用中向URL添加

&fragment=content

。可能会解决你的第一个问题

你还可以发布你的“地址”流的代码吗

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

<input type="submit" value="NextPage" name="_eventId_nextPage" id="submitMyForm" onclick="Spring.remoting.submitForm('submitMyForm', 'myForm', {fragments:'content'}); return false;"/>

或AjaxEvent装饰：

<script type="text/javascript">
    Spring.addDecoration(new Spring.AjaxEventDecoration({
        elementId: "submitMyForm",
        event: "onclick",
        formId: "myForm",
        params: {fragments: "content"}
    }));
</script>


Spring.addDecoration（new Spring.AjaxEventDecoration({
elementId:“submitMyForm”，
事件：“onclick”，
formId：“我的表格”，
参数：{fragments:“content”}
}));

然后看看这是否有效

使用带瓷砖的Thymeleaf使其工作。它不适用于正常的

th:fragment

要进行ajax调用，我们可以使用本文中定义的jquery脚本（ajaxcall.js）或SpringJS，如下所示：

   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（使用平铺）


在此处插入标题

添加了

&fragment=Content

，但运气不佳。此外，尝试传递参数

&ajaxSource=true

，如[，始终以响应的形式获取完整页面。我的地址流代码：

，我想您的父流“地址”中有一个

，对吗？它是

&fragment=content

，带有小写的

。您能为您的父流“地址”发布代码吗太好了？单击

首页上的下一页提交按钮的事件，我将启动我的ajax脚本，该脚本调用我的建议的
，应该部分呈现。还没有到达地址流。是的，它是&fragment=content
，小写c。
<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> 

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