jquery - Ajax 调用 WebFlow

标签 jquery ajax spring-webflow thymeleaf

我正在尝试对我的网络流进行 Ajax 调用,并且希望仅针对每个 View 状态刷新页面的内容部分。

 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>

提议的Insured.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 进行了两次调用,一次是 Post 失败,另一次是 Get 返回响应。谁能解释一下为什么会发生这种情况?

最佳答案

尝试将 &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>

看看是否有效

关于jquery - Ajax 调用 WebFlow,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13052106/

相关文章:

javascript - url IP不正确如何返回ajax错误

Grails WebFlow DRY 分支逻辑

java - Spring Web Flow...如何仅在一次转换上停止表单验证

java - 如何将 REST channel 添加到 Spring Webflow 应用程序?

javascript - jQuery Colorbox 插件不加载图像

javascript - 使用类似 JQuery 的选择器语法以编程方式编辑 Less (css) 代码?

javascript - 将 JSONP 提交到 PHP

ajax - Vue.js + Vue 资源编号 'Access-Control-Allow-Origin'

javascript - 使用 jQuery attr 检查 img src 是否为空

javascript - 使用 css 创建具有跨行的表状结构