Struts2JQuery:Ajax提交表单、服务器表单验证和成功重定向

我在使用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。

Submit运行良好，它将表单提交给我的struts2操作，但一旦成功，sucess操作将重新加载整个页面。

我希望你们能帮我找到解决问题的办法。

提前谢谢。

请参阅下面的示例，我曾使用该示例上传图像，而无需提交整个页面并显示。

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

相关内容

最新更新

热门标签：