プロジェクトでは、システムまたは Web サイトの最も一般的なメイン インターフェイスであるページ セグメンテーションに遭遇することがよくあります。メインページは上部のシステム紹介、下部の作者紹介、左側のシステム機能メニュー、右側の実際にメニューが表示されるインターフェースに分かれています。
この種のページ分割に遭遇したとき、誰もが最初に考えるのは、フレームセットを使用して複数のフレームを分割する簡単な方法です。フレームセットを使用したくない場合は、フロントエンド デザインが好きな人は、CSS スタイルのスキルをテストすることになるスプライシングとフローティングを選択することもできます。
今回は部分リフレッシュの問題を中心に説明します。要件は、左フレーム、右フレームです。
このようにリフレッシュしても問題ないのではないかと思われるでしょう。確かに。次に、frameset を使用して 2 つのフレームを分割し、それぞれを更新します。右側のフレームに表示されるメニューを更新して送信するだけです。左フレームには影響しません。
理解しやすいように、左側のフレームを LeftFrame と呼び、右側のフレームを RightFrame と呼びます。RightFrame ページを送信する場合は、LeftFrame [Dynamic] ページを更新する必要があります。何をするか？
実際、これはデータベースからデータを再読み取りすることを意味します。
その中で、modifyMenu!showTreeMenu は、tree.jsp ページにリダイレクトされます。
現在のプロジェクトでは、右側のページのデータが送信されると、struts2 がフロント デスクで使用されます。このアイデアは、データを再度読み取ることと同じですが、ロードされたメイン インターフェイスに再度ジャンプします。実際には右側の領域に表示されるので、LeftFrame が 2 つになります。 Struts2 で resultType のリダイレクトを変更しても機能しません。
最後に、単純な JS で問題が解決されました。
右側のページで RightFrame を送信した後、JS を使用して左側の LeftFrame を更新します。次のように：
rightFrame の本文の onload イベント:
window.parent.frames[ "leftTree"].location.reload()
ある思考回路の行き止まりに陥ったとき、思考回路を変えてみると明るい未来が見えてきます。
要件は次のとおりです。右側の RightFrame ページを更新する場合、左側の LeftFrame の一部のみを更新します [特定の p を更新]。
部分リフレッシュというと、Ajax 部分リフレッシュが思い浮かぶはずです。
次に、純粋な js Ajax の基本実装を使用します。
関数 init(){
//部分リフレッシュを実行する
var xmlHttpReq=createXmlHttpRequest();
// struts2 アクション、サーブレット、JSP ページなどの開始 URL を取得します。
var url="success.jsp";
xmlHttpReq.open("GET",url,true);
//非同期呼び出しを行っているため、
//そのため、XMLHttpRequest オブジェクトが呼び出すコールバック イベント ハンドラーを登録する必要があります。
xmlHttpReq.onreadystatechange=function(){
if(xmlHttpReq.readyState==4){
if(xmlHttpReq.status==200){
//parent を使用して左ページの p を取得し、表示の外観を変更します
window.parent.frames["leftTree"].document.getElementById(pId).innerHTML="テスト";
}それ以外{
アラート(xmlHttpReq.status+xmlHttpReq.responseText);
}
}
};
xmlHttpReq.send(null);
}
window.parent.frames["leftTree"].document.getElementById(pId).innerHTML=xmlHttpReq.responseText
バックグラウンドアクションでの書き込み方法は以下のとおりです。
2 つのリフレッシュ方法、1 つは全体リフレッシュ、もう 1 つは部分リフレッシュ。