0

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

我在此页面的标记中手动添加了 jquery-1.8.js<head>来执行 Ajax 调用。当从导航中单击菜单时,<div>我正在调用 struts2 操作,$.ajax并在 content 中加载结果<div>。这包括我的应用程序中的数据输入表。

我想submit将数据发送到 struts2 操作,成功后我想调用另一个 struts2 操作(记录列表),而不刷新整个页面,仅替换内容<div>。并且在服务器验证错误的情况下,使用 Ajax,验证错误消息必须显示在有错误的字段顶部。(无需重新加载页面)

我想在不使用 struts2-jquery 插件的情况下执行此操作,因为我已经在我的主页中手动添加了 jquery1.8.js。

提交工作正常,它将表单提交给我的 struts2 操作,但成功后,成功操作会重新加载整个页面。

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

提前致谢。

4

1 回答 1

0

请参阅下面的示例,我曾经在不提交整个页面并显示该页面的情况下上传图像。

<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>
于 2013-02-05T06:43:58.433 回答