5

jquery を使用する Web アプリケーションがあります。ポップアップで開く新しいモジュールを追加する必要があります。次に、そのモジュール内のすべてのページが、ajax を使用して同じポップアップ ウィンドウで開きます。

追加/編集/リスト/検索ページなどのページがあります。これらのページを同じポップアップにロードする必要があります。

これはポップアップでページ遷移を行うことは可能ですか? Spring MVC を使用しています。

編集 1

メニューのリンクをクリックするのと同じように、ポップアップが開きます。ポップアップには、新しい画面に移動するボタンがいくつかありますが、同じポップアップ内にあります。画面のごく一部を更新するために ajax を使用しました。これにはdivとspanを使用していました。しかし、ポップアップ ページ全体を、多くの html コンポーネントを含むまったく新しいページに置き換えるにはどうすればよいでしょうか。

私がajaxを使用した限り、リモート呼び出しを行うと、サーバー側のメソッドは応答としてjsonとしてデータオブジェクトを返し、クライアント側でページの特定の領域を更新するために使用できます。

サーバー側からの応答でページ全体を返すことはできますか?

助けてください。

4

8 に答える 8

2

AJAX は次の 2 つの方法で機能します。

  • ページのコンテンツを更新するために使用される json オブジェクトを返す
  • ページ内のコンテンツを置き換えるために使用される html を返す

AJAX を使用してページ全体を置き換える場合、そのページ内のすべてのリンクも AJAX を使用して同じことを行う必要があります。

より簡単な方法は、iframe オーバーレイを使用することです。これにより、コンテンツを通常のページのように機能させることができます。そのため、iframe 内のリンクは通常のリンクと同じように機能しますが、iframe 領域のみを更新します。

于 2013-05-25T19:44:15.620 に答える
1

JQueryを使用してこれと同様のことを行うことができます

  var request = $.ajax({
      type: "POST",
      url: "Call to Spring Controller", // Yii mvc would look like /myurl.com/action
      data: Spring controller parameters, // remove if you don't have parameters
      dataType: "html"
   });

   request.done(function(msg) {
         //if you have any elements you want to remove or hide, do it here.
         $("#main").html( msg );
   });

これに似た HTML をポップアップ ページに貼り付けます。

  <div id="main">

  </div>

$.ajax 呼び出しが完了すると、div には、Spring 経由で返す HTML コードが含まれます。

于 2013-05-30T17:28:28.423 に答える
1

標準ページをリクエストするだけで、AJAX を使用してページ全体を取得できるはずです。その後、サーバーから返された HTML は次のようpopup.document.documentElement.innerHTML = newHTMLになります。newHTML

于 2013-05-25T10:23:40.483 に答える
1

コントローラーは JSON を返すことができます (ただし、何らかのテンプレート (以下で説明します) を値だけで埋める機能が必要です。または、コントローラーで html を返し、必要なページの一部を JavaScript で置き換える必要があります。

あなたのhtmlでは、次のようなことができます：

<div id='loader'>Loading...</div>
<div id='popup'>This will be replaced</div>
<header></header>
<nav></nav>
<secton id='content'></section>
<footer></footer>

CSS で次の 2 つの div を必ず非表示にしてください。div#loader, div#popup { display: none; }

ローダーの をポップアップのz-indexより小さく設定します。z-index

タグにプロパティを設定して、aそれぞれがポップアップを開くかどうかを指定します。

<a href='your/url' data-pops>Click me</a>

これらすべてのアンカー クリック イベントを関数にバインドして、これを処理します。

$('a[href]').click(function() {
    var self = this;
    var url = $(self).attr('href');

    if($(self).attr('data-pops')) {
        showPopup(url);
    } else {
        loadContentPartial(url);
    }
});

data-pops属性が存在する場合showPopup、アンカーから指定された URL で関数が呼び出されます。それ以外の場合は、ここで名前が付けられた関数の呼び出しが実行されloadContentPartial、コンテンツを更新できます。

関数showPopupは次のタスクを実行できます。

  • ローダーを表示します。
  • を実行し$.getます。
    • get が json のみを返す場合 (mvvm フレームワークである knockoutjs を使用することをお勧めします)
    • get が未加工の html を返す場合: get が完了したら、ポップアップ div のコンテンツを から返されたコンテンツに置き換え$.getます。
  • ローダーを非表示にしてポップアップを表示しないでください。(ポップアップがその上にあるため、ローダーの画像/アイコン/テキストは表示されません - ユーザーの操作を避けるために灰色のオーバーレイを維持します)

関数は、show popuploadContentPartialとほぼ同じタスクを実行する必要がありますが、セクションのコンテンツを置き換えてからローダーを非表示にする必要があります。 ここでちょっとしたチートに注意してください。ページ全体のリクエストを実行できます。ここで返されたコンテンツを現在のページ コンテンツに置き換えます。リクエストは少し大きくなりますが、最近では 30k または 10k を返すことはそれほど重要ではありません。もちろん、Facebookではありません。

今:コントローラーから html を作成するか、フォーム、ボタン、フィールド、および必要なすべてのものを使用して、返される生の html を生成するヘルパー メソッドを作成することをお勧めします。ノックアウト js の使用を選択した場合は、いくつかのチュートリアルがあります。NDC (Norwegian Developer Conference) で Brad Wilson によって記録された、私にとって最高のチュートリアルは次のとおりです。使用、学習、実装が非常に簡単です。私はそれを使用したことはありませんが、ここにリンクがあります。K Scott Allen は、ASP.NET MVC4 FundamentalsHandlebarsjsと呼ばれるPluralsightで (いつものように) 素晴らしいチュートリアルを持っています。

万が一、ポップアップ用のローダーが必要な場合は、次のいずれかを実行できます。

  • オーバーレイされたローダーの を変更z-indexし、ポップアップの処理が終了したら元に戻します。
  • などの別のオーバーレイ ローダーを作成し、より高いdiv#popupLoaderを設定します。z-indexdiv#popup
于 2013-06-01T05:11:46.003 に答える
1

私の知る限り、ポップアップ全体を置き換えると、もはや AJAX ではなくなります。以前に定義されたポップアップ ウィンドウを新しい URL で更新する通常の JavaScript は、別のウィンドウで何が起こっているかを変更する唯一の方法です。

これは、「ポップアップ」ウィンドウをページ内の div として作成し、あらゆる種類のブラウザー セキュリティの問題を排除しない限りです (多くのブラウザーでは、別のウィンドウでコンテンツを動的に変更することは禁止されています)。そうすれば、その div のコンテンツ全体を AJAX で変更できます。css を使用すると、div をタブまたは仮想ポップアップ ウィンドウとして実装できます。

幸運を

于 2013-05-30T08:25:03.060 に答える
0

私たちのアプリケーションの同じ問題に関する限り、Jquery 用の fancybox プラグインを使用しました。HTMLだけを表示したい場合は、jsonでエンコードされたデータを送信する必要があります。 ここからダウンロードできます。popup/fancybox に表示したい URL を渡すこともできます。Web への他のリンクにもアクセスできる別の Web ページのように機能します。

ポップアップとリンクを表示したいHTMLタグにクラス「fancybox fancybox.iframe」を追加するだけです。

同じ例を次に示します。

<div class="question"><a class="upload_link fancybox fancybox.iframe" href="http://localhost/4.0/utils/info/cust_id"></a></div>
于 2013-06-01T08:31:27.967 に答える