4

コンテンツの一部が正常にロードされ、jsps を使用してページがレンダリングされるページで作業しています。そのページで生成された製品画像とリンクは、カスタム jstl タグによるものです。

ユーザーがスクロールすると、JSON 応答でサーバーからさらに多くの製品が要求され、UnderscoreJS テンプレートを使用してレンダリングされ、ページの下部に追加されます。JavaScript 関数を使用して再作成せずに、JavaScript で JSTL タグを使用する方法はありますか (JavaScript ですべてを再作成することはできません)。

このシナリオを処理する最善の方法は何ですか? ajax呼び出しに対してレンダリングされたhtml応答を返すことができると思いますが、それはjsonを使用するいくつかのajaxリクエストとレンダリングされたhtmlを使用するいくつかがあることを意味します...

4

3 に答える 3

3

JavaScript で JSTL タグを再利用することはできません。これは、それらが JavaScript ではなく Java であることと、クライアントではなくページがレンダリングされるときにサーバー側で実行されるためです。

しかし、あなたの JavaScript はすでにデータを取得してレンダリングできるので、最初の部分のレンダリングを JSTL でやめて、すべてを JavaScript/Ajax/UnderscoreJS で行ってみませんか?

于 2012-11-26T04:18:29.810 に答える
1

私は同じ状況で少なくとも2つの（多かれ少なかれ類似した）ソリューションを使用しました。

  1. 付属のJSPを使用します。最初のリクエスト（商品の画像とリンクのリストを含むページ）は、ページ全体のJSPを返す必要があります。

    <%@page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
... skipped ...
<c:forEach items="${products}" var="product">
  <%@include file="productInfo.jsp"%>
</c:forEach>
... skipped ...
</html>

    2番目のリクエスト（リストの継続を求めるAJAXリクエスト）は、リストのリクエストされた部分を含むJSPを返す必要があります。

    <c:forEach items="${products}" var="product">
  <%@include file="productInfo.jsp"%>
</c:forEach>

    そのコンテンツは、追加の処理なしで、ブラウザーのAJAX応答ハンドラーによってDOMに挿入される場合があります。両方の応答に、単一の製品に関する情報を表示するための同じJSPが含まれていることに注意してください。

  2. 代わりに、JSPタグ<%@include file="..."%>を使用できます。残りは似ています：ページ全体のJSP

    <%@page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
... skipped ...
<c:forEach items="${products}" var="product">
  <tag:productInfo product="${product}" />
</c:forEach>
... skipped ...
</html>

    リストの要求された部分を含むJSP：

    <c:forEach items="${products}" var="product">
  <tag:productInfo product="${product}" />
</c:forEach>

このようにして、両方の応答（AJAXと非AJAX）に単一ビュー（JSP）を再利用し、AJAXの2番目のレンダリングメカニズム（JSON + JavaScriptからの手動DOMフラグメント作成）を排除できます。

于 2012-12-02T22:31:42.797 に答える
1

これを解決する 1 つの方法は、プレーン オブジェクトAJAXの代わりに を返すメソッドを作成することです。HTML

新しいレコードの html を作成し、前のコンテンツに追加できる応答として html を送信する jsp ページを作成できます。

元

あなたのページがこのようなものであると仮定します

<div class="container">
    <div class="record rec-1">
        //some html code
    </div>
    <div class="record rec-2">
        //some html code
    </div>

    .....
    .....

    <div class="record rec-n">
        //some html code
    </div>
</div>

次に、より多くのコンテンツをロードして ajax 呼び出しを行いたい場合は、サーバーが次のような処理済みの html 応答を返すようにします。

    <div class="record rec-n+1">
        //some html code
    </div>
    <div class="record rec-n+2">
        //some html code
    </div>

    .....
    .....

    <div class="record rec-n+k">
        //some html code
    </div>

に簡単に適用できますcontainer。jsp ページを使用して html を生成できます。

于 2012-11-26T04:51:34.783 に答える