Struts2 JQuery：Ajax提交表单，服务器表单验证和成功重定向
[英]Struts2 JQuery : Ajax Submit Form, Server Form Validation and Success Redirection
问题描述
I have the following layout in my web applications using struts2 framework. 
我在使用struts2框架的Web应用程序中具有以下布局。
main_layout.jsp 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 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 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>
I manually added jquery-1.8.js inside the <head> tag of this page to do the Ajax Call. 我在此页面的<head>标记内手动添加了jquery-1.8.js来进行Ajax调用。 When a menu is clicked from navigation <div> I am calling a struts2 action using $.ajax and load the result inside content <div> . 当从导航<div>单击菜单时，我正在使用$.ajax调用struts2动作，并将结果加载到内容<div> 。 This includes data entry form in my application. 这包括我的应用程序中的数据输入表单。
I wanted to submit the data to a struts2 action and on success I want to call another struts2 action (List of Records) without refreshing the whole page replacing only the content <div> . 我想将数据submit给struts2动作，成功后我想调用另一个struts2动作（记录列表），而不刷新整个页面，仅替换内容<div> 。 And in the event of Server validation error, using Ajax, the validation error message must be displayed on top of field that has error. 并且如果发生服务器验证错误，则使用Ajax，验证错误消息必须显示在有错误的字段顶部。 (Without reloading the page) （不重新加载页面）
I want to do this without using struts2-jquery plugin since i already added manually the jquery1.8.js in my main page. 我想不使用struts2-jquery插件来执行此操作，因为我已经在主页中手动添加了jquery1.8.js。
Submit is working fine, it submits the form to my struts2 action but upon success, the sucess action reloads the whole page. 提交工作正常，它将表单提交给我的struts2动作，但是成功后，成功动作将重新加载整个页面。
I hope that you guys could help me find a solution to my problem. 我希望你们能帮助我找到解决我问题的方法。
Thanks in advance. 提前致谢。
1 个解决方案
解决方案1
0 2013-02-05 06:43:58
see the example below I have used to upload image without submitting the whole page and displaying that. 请参阅下面的示例，我曾经上传图像而不提交整个页面并显示它。
<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 width="200" height="200" 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 width="200" height="200" alt="" src="<s:url action="async.streamImage?token=_matImageUploaded&imgType=jpeg" namespace="/misc" />">
</a>
</td>
</tr>
<tr>
<td width="200" >
<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" width="350" height="150" 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" width="100%" 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.