Struts2 JQuery：Ajax提交表單，服務器表單驗證和成功重定向

Question

我在使用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動作，但是成功后，成功動作將重新加載整個頁面。

我希望你們能幫助我找到解決我問題的方法。

提前致謝。

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

Struts2 JQuery：Ajax提交表單，服務器表單驗證和成功重定向

問題描述

1 個解決方案

解決方案1
0 2013-02-05 06:43:58

Struts2 JQuery：Ajax提交表單，服務器表單驗證和成功重定向

問題描述

1 個解決方案

解決方案1 0 2013-02-05 06:43:58

解決方案1
0 2013-02-05 06:43:58