Struts2 JQuery：Ajax 提交表单、服务器表单验证和成功重定向
Posted
技术标签:
【中文标题】Struts2 JQuery：Ajax 提交表单、服务器表单验证和成功重定向【英文标题】：Struts2 JQuery : Ajax Submit Form, Server Form Validation and Success Redirection 【发布时间】：2012-08-24 18:40:12 【问题描述】：我在使用 struts2 框架的 Web 应用程序中有以下布局。
main_layout.jsp
<html>
<head>
jquery is linked here
<script>
$(document).ready(function ()
$.ajaxSetup (
cache: false
);
$("#newRecord").click(function()
$("#content").html("loading...").load("showNewRecordEntry.action");
);
);
</script>
</head>
<body>
<div id='header'>
</div>
<div id='content_wrapper'>
<div id='navigation'>
<input type="button" id="newRecord" value="New Record" />
</div>
<div id='content'>
--- ajax is called to put contents
</div>
</div>
<div id='footer'>
</div>`
</body></html>
struts.xml
<action name="showNewRecordEntry" method="showNewRecordEntry" class="recordAction">
<result name="success">/WEB-INF/web/new_record.jsp</result>
</action>
<action name="saveRecord" method="saveRecord" class="recordAction">
<result name="success" type="redirectAction">
<param name="actionName">showRecordList</param>
</result>
<result name="input" type="redirectAction">
<param name="actionName">showNewRecordEntry</param>
</result>
<result name="error" type="redirectAction">
<param name="actionName">showNewRecordEntry</param>
</result>
</action>
<action name="showRecordList" method="showRecord" class="recordAction">
<result name="success">/WEB-INF/web/record_list.jsp</result>
</action>
new_record.jsp
<%@taglib uri="/struts-tags" prefix="s"%>
<s:form action="saveRecord">
<s:textfield name="name" />
<s:textfield name="address" />
<s:submit />
</s:form>
我在此页面的<head> 标记中手动添加了 jquery-1.8.js 来执行 Ajax 调用。
当从导航<div> 中单击菜单时，我正在使用$.ajax 调用struts2 操作并将结果加载到内容<div> 中。这包括我的应用程序中的数据输入表单。
我想submit 将数据发送到 struts2 操作，成功后我想调用另一个 struts2 操作（记录列表）而不刷新整个页面，仅替换内容<div>。并且在服务器验证错误的情况下，使用 Ajax，验证错误消息必须显示在有错误的字段的顶部。 （无需重新加载页面）
我想在不使用 struts2-jquery 插件的情况下执行此操作，因为我已经在主页中手动添加了 jquery1.8.js。
提交工作正常，它将表单提交给我的 struts2 操作，但成功后，成功操作会重新加载整个页面。
我希望你们能帮助我找到解决问题的方法。
提前致谢。
【问题讨论】：
那么您遇到的问题是什么？而且我不确定是否要调用第二个动作，因为您似乎没有做任何事情是第一个动作，或者您想提取一些数据并显示它，或者基于第一个动作的数据想要调用第二个动作等？ 没有错误，但是当我提交表单并成功返回时，成功操作不会转到“内容”div。它替换了我页面的所有内容。我希望成功操作结果转到 当您想要进行 AJAX 调用时，您必须阻止表单的默认行为。 你能详细说明你的答案吗？怎么做以及应该配置什么假设我在 中有一个表单 把一个完整的例子用表格然后在问题中=） 【参考方案1】：请参阅下面的示例，我曾经在不提交整个页面并显示该页面的情况下上传图片。
<html>
<script>
function addMatsImage()
$("#matImageFormDialog").dialog("open");
var asyncFormFrame=document.getElementById("acsyncFormSubmitterFrame");
asyncFormFrame.removeAttribute("onload");
var brwsRequestId = Math.random();
asyncFormFrame.onload = function()
$("#matImgDisp").empty();
var imgURL1='<s:url action="async.streamImage?brwsRequestId='+brwsRequestId+'&token=_matImageUploaded&imgType=jpeg" namespace="/misc" />'
var img1 = $("<img width='200' height='200' />").attr('src', imgURL1)
.load(function()
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0)
else
$("#matImgDisp").append(img1);
);
;
</script>
<body>
<table>
<tr>
<td style="border: 1px solid black;">
<a id="matImgDisp" class="zoomImage" title="" style="cursor: url('<%= request.getContextPath()%>/images/zoomin.cur');" href="<s:url action="async.streamImage?token=_matImageUploaded&imgType=jpeg" namespace="/misc" />">
<img src="<s:url action="async.streamImage?token=_matImageUploaded&imgType=jpeg" namespace="/misc" />">
</a>
</td>
</tr>
<tr>
<td >
<input type="button" value="Upload" onclick="addMatsImage()" Class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text" Style="background-image: url('../layout/images/btnplanning.jpg'); background-repeat: repeat; color: #FFFFFF" />
</td>
</tr>
<tr>
<td>
<sj:dialog id="matImageFormDialog" autoOpen="false" cssStyle="font: inherit;"
modal="true" title="Upload Image"
buttons="
'Submit':function() uploadMatImage(); ,
'Cancel':function() cancelMatImageUpload();
" >
<s:form id="IDmatImageForm" name="matImageForm" action="async.uploadImage" namespace="/misc" target="acsyncFormSubmitterFrame" enctype="multipart/form-data">
<table border="0" cellspacing="0" cellpadding="0" align="left" style="font: inherit;">
<tr>
<td><s:text name="Upload Image" /></td>
<td>
<s:hidden name="tokenName" id="IDtokenName" value="_matImageUploaded" />
<s:file name="imageFileUploaded" id="imageFileUploaded"/>
</td>
</tr>
</table>
</s:form>
</sj:dialog>
</td>
</tr>
<tr>
<td>
<iframe id="acsyncFormSubmitterFrame" name="acsyncFormSubmitterFrame" style="display: none;"></iframe>
</td>
</tr>
</table>
</body>
</html>
【讨论】：
以上是关于Struts2 JQuery：Ajax 提交表单、服务器表单验证和成功重定向的主要内容，如果未能解决你的问题，请参考以下文章