4

ヘッダー、メニュー、本文、フッターを含むタイルレイアウトページがあります。このレイアウトでは、ユーザーがメニューリストで何らかのアクションを実行するたびに、レイアウト全体（ヘッダー、メニュー、フッターを含む）が更新されます。ヘッダー、メニュー、フッターを静的にし、本体部分のみを更新する必要があります。

ヘッダー、メニュー、フッターの更新を防ぎ、タイルを使用して実装できるメニュークリックの本文コンテンツのみを更新する方法はありますか？

4

2 に答える 2

7

これを行うには、ajax呼び出しを使用する必要があります。一般的な手順は次のとおりです。

1.-ヘッダー、ボディ、フッターで構成されるベースとなるタイルを作成して定義します。これは次のようになります。

<div id='headerTile'>whatever goes here...</div> <!--this is baseHeader.jsp-->
<div id='bodyTile'>whatever goes here....</div>  <!--this is baseBody.jsp-->
<div id='footerTile'>whatever goes here...</div>  <!--this is baseFooter.jsp-->

これらの各divを定義内の1つのタイルと見なしてみましょう。

<definition name="layoutBase" path="/whateverPathItIs/layoutBase.jsp">
    <put name="header" value="/whateverPathItIs/baseHeader.jsp"/>
<put name="body" value="/whateverPathItIs/baseBody.jsp" />
<put name="footer" value="/whateverPathItIs/baseFooter.jsp" />         
</definition>

2.-ボディコンテンツを置き換えるすべての異なるjspを作成して定義します。このjspには、ボディ要素のみが含まれている必要があることに注意してください。ページに表示する準備ができている他の2つの本文コンテンツがあり、それぞれがタイルになるとします。

<div id='bodyContent1'>whatever goes here again...</div> <!--this is content1.jsp-->

<div id='bodyContent2'>whatever goes here again 2</div> <!--this is content2.jsp-->

3.-この時点で、ベースjspタイルとボディコンテンツを含む他の2つのjspの両方があります。ここで、サービスとして機能し、ajaxリクエストに応じて対応するボディを返すstrutsアクションが必要です。これを通常のアクションとして実行し、最後にmapping.findForwardメソッドで、本体を含むjspを返します。ボディコンテンツごとに1つのアクションを作成するか、ボディごとにメソッドを含む単一のDispatchActionを作成できます。2番目のオプションはよりクリーンで、アクションは次のように定義されます。

<action path="/bodySwitcher" 
        type="BodySwitcherAction"
        parameter="method"
        scope="request"
        >
    <forward name="content1" path="/pathToJsp/content1.jsp"/>
    <forward name="content2" path="/pathToJsp/content2.jsp"/>
</action>

4.-コンテンツを切り替えるには、javascriptまたはjqueryを使用してajax呼び出しを行い、返されたjspを本体にロードします。これは、ajax呼び出しとして.load（）を使用して、jQueryのコンテンツを切り替えるメソッドの例です。

function switchContent(whichContent){
     $('#bodyTile').children().remove();
     $('#bodyTile').load("/pathToYourApp/bodySwitcher.do?method="+whichContent);
}

答えがどれだけ長いかに落胆しないでください、私はただきれいに説明しようとしています。これは実際には非常に簡単で、質問は他の何よりもjquery / javascriptに関連しています。唯一の詳細は、strutsアクションをサービスとして使用する方法です。幸運を。

于 2012-06-15T10:03:39.220 に答える
1

私はTh0rndikeが好きで、チャームのように働きました。私は春を使っていて少し違いましたが、同じ考えでした。

私の構成では、タイルを使用してビューのみを使用して解決するため、jspファイルを直接使用して新しい本文を転送することはできませんでした。たとえば、path ="/pathToJsp/content1.jsp"を使用します。

ファイルlayouts.xmlのタイルのスプリングドキュメントのデフォルト構成を使用して、既存のテンプレートに加えて、Ajaxリクエストが行われるたびに新しいボディを含む新しいテンプレートを追加します。

<definition name="bodySwitcher" template="/WEB-INF/layouts/bodySwitcher.jspx">
<put-attribute name="bodyContent" value="" />
</ Definition>

テンプレートファイルを次のように設定します。

<div xmlns: jsp = "http://java.sun.com/JSP/Page"
xmlns: c = "http://java.sun.com/jsp/jstl/core"
xmlns: tiles = "http://tiles.apache.org/tags-tiles"
xmlns: spring = "http://www.springframework.org/tags"
xmlns: util = "urn: jsptagdir :/ WEB-INF/tags/util" id = "bodySwitcher"
version = "2.0">

<tiles:insertAttribute name="bodyContent" />

</div>

ファイルviews.xmlで、特にページの新しい本文をロードする各リンクのコンテンツを設定します。

<definition name="link1" extends="bodySwitcher">
<put-attribute name="bodyContent" value="/WEB-INF/views/link1.jspx" />
</ Definition>

<definition name="aboutus" extends="bodySwitcher">
<put-attribute name="bodyContent" value="/WEB-INF/views/aboutus.jspx" />
</ Definition>

Ajaxリクエストはメインテンプレートで行うことができます：

$ (Document). ready (function () {

$ ('. PageAction'). click (function (e) {
LoadPage (e)
});

function LoadPage (e) {
e.preventDefault ();
console.log (e)
console.log (e.currentTarget.pathname);
$ ('# BodySwitcher'). children (). remove ();
$ ('# BodySwitcher'.) Load ("bodySwitcher? Method =" + e.currentTarget.pathname);
}

});

ajaxリクエストは、bodySwitcherのパラメーターメソッドで指定されたビューに転送するコントローラーを使用して処理できます。「forward：」+ link1のような転送文字列を返し、link1要求を処理するコントローラーに転送します。

于 2013-08-12T04:21:27.290 に答える