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操作，但成功后，sucess操作会重新加载整个页面。

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

提前致谢。

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 个答案: