jQuery動的読み込みhtml
898 ワード
従来、jqueryを使用する過程で、ある情報を動的にロードする必要がある場合、一般的な処理方法はactionで情報をクエリーし、jsonでjspページに戻り、ページでjavascriptを使用して指定したスタイル、例えば表をつづる.このパッチワークの過程は煩わしいし、特に間違いやすく、デバッグも面倒です.
こんなに面倒なのは、jqueryに慣れていないからです.jqueryには、actionの実行結果を指定したhtml要素、例えばdivに動的にロードできるloadメソッドがあることがわかりました.そこで、以前のプログラムを書き換えることができて、情報を取得する時、依然として伝統的な方法を採用して、つまりstruts 2のactionを通じて情報を取得して、それからあるページの表示情報にジャンプして、私達はこのページの中でスタイルを設定することができて、実はこのページは普通のjspページで、中でstruts 2のラベルを通じてデータを表示します.次に、以前のajaxメソッドをloadに変更します.
例は次のとおりです.
前に動的情報を表示したdivのidがdetailInfoである場合
ajaxメソッドを次のように書くことができます.
この処理後、jqueryはactionの実行結果をdetailInfoのdivに表示します.これにより、動的に情報を取得する目標を達成するとともに、コードの概要を維持し、スタイルを簡単に定義することができます.
こんなに面倒なのは、jqueryに慣れていないからです.jqueryには、actionの実行結果を指定したhtml要素、例えばdivに動的にロードできるloadメソッドがあることがわかりました.そこで、以前のプログラムを書き換えることができて、情報を取得する時、依然として伝統的な方法を採用して、つまりstruts 2のactionを通じて情報を取得して、それからあるページの表示情報にジャンプして、私達はこのページの中でスタイルを設定することができて、実はこのページは普通のjspページで、中でstruts 2のラベルを通じてデータを表示します.次に、以前のajaxメソッドをloadに変更します.
例は次のとおりです.
前に動的情報を表示したdivのidがdetailInfoである場合
<div id="detailInfo">
</div>
ajaxメソッドを次のように書くことができます.
$("#detailInfo").load("<%=request.getContextPath()%>/namespace/action.action?id=${id}");
この処理後、jqueryはactionの実行結果をdetailInfoのdivに表示します.これにより、動的に情報を取得する目標を達成するとともに、コードの概要を維持し、スタイルを簡単に定義することができます.