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>。これには、アプリケーションのデータ入力フォームが含まれます。

データを struts2 アクションに送りたかったsubmitのですが、成功したら、ページ全体を更新せずに別の struts2 アクション (レコードのリスト) を呼び出したいと思います content のみを置き換えます<div>。また、サーバー検証エラーが発生した場合、Ajax を使用して、エラーのあるフィールドの上に検証エラー メッセージを表示する必要があります。(ページをリロードせずに)

メインページにjquery1.8.jsを手動で追加したので、struts2-jqueryプラグインを使用せずにこれを行いたいです。

送信は正常に機能しており、フォームを struts2 アクションに送信しますが、成功すると、成功アクションがページ全体をリロードします。

皆さんが私の問題の解決策を見つけるのを手伝ってくれることを願っています.

前もって感謝します。

4

1 に答える 1

0

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