1

ページ全体を更新せずに、サーバーから DIV に新しいコンテンツを読み込みたい。私は次のことを試しました

$.ajax({
    type: "GET",
    url: "http://127.0.0.1:8000/result/?age="+ ageData +"&occasion="+ 
       occasionData     +"&relationship="+ forData +"#",
    success: function (response) {
        $("#testDIV").html(response);
    }
});

しかし問題は、ページ全体が に読み込まれていること<DIV id="testDIV">です。古い DIV を、ページ全体ではなく、サーバーから返された新しい DIV コンテンツに置き換えたい。

4

4 に答える 4

1

AJAX を直接使用することに興味があり、完了した関数を管理したいという同じプロセス感覚を維持できます ( .done() がそれを置き換えるため、成功ではなく)。これが方法です...

   .done(function(data) {
    ...
    }

その完了した関数内で、ページのコンテンツを必要なものにフィルターできます。このようにjqueryでフィルタリングしたいものをリクエストするだけです...

var $response = $(data);
var response_title = $response.filter(".title").html(); //I'm assuming you are trying to pull just the title (perhaps an < h1 > tag, in this little example, from the entire external page!

それから！...

$("#testDIV").html(response_title);

jQuery の APIに基づいた done 関数を使用すると、この形式を使用できます...

$.ajax({
type: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});

したがって、最終的なコードは次のようになります...

$.ajax({
    type: "GET",
    url: "ht.tp://127.0.0.1:8000/result/?age="+ ageData +"&occasion="+  occasionData     +"&relationship="+ forData +"#"})
    .done(function(response) {
    var $response = $(response);
    var response_title = $response.filter(".title").html(); 
    $("#testDIV").html(response_title);
    });
于 2013-03-19T14:20:16.780 に答える
0

blackhawkの回答が気に入っています。既存のコードをわずかに変更して使用します。

次のような1行の変更に要約します。

$.ajax({
     type: "GET",
     url: "http://127.0.0.1:8000/result/?age="+ ageData +"&occasion="+ 
     occasionData+"&relationship="+ forData +"#",
     success: function (response) {
         $("testDIV").html($(data).filter(".title").html());
     }
});
于 2013-03-19T14:27:30.127 に答える
0 
$(function(){
    $('.classloader.').on('click', function(e){

        $.ajax({
            type: "GET",
            url: "http://127.0.0.1:8000/result/?age="+ ageData +"&occasion="+ 
   occasionData +"&relationship="+ forData +"#",
            beforeSend:  function() {
                $("#testDIV").hide();
                $('div#loading').show();
            },
            success: function(html){
                $("#testDIV").html($(html).filter("#mainContent").html()).show();
                $('div#loading').hide();
            }
        });     
        return false;
    });
})
于 2013-03-19T14:25:05.140 に答える
0

表示しているコードは実際には正しいです。問題は、サーバーが提供しているものに起因します。

ここで行っているのは、AJAX 呼び出しを介してページ全体を取得し、 One divのコンテンツをそのページ全体に置き換えることです。

サーバーはその呼び出しに対してページ全体をレンダリングするのではなく、置き換えたい div のコンテンツのみをレンダリングする必要があります。rails や symfony などのフレームワークを使用している場合、クエリが通常の GET リクエストなのか、それとも AJAX 呼び出しなのかを簡単に検出する方法が提供されることがよくあります。

基本的に、自由に使える 4 つの戦略があります。

  1. ajax 呼び出しにのみ使用され、置換する div のコンテンツを返す特定のエンドポイントにリクエストを行います。ページ全体ではありません。
  2. 同じページにリクエストを送信し、リクエストが通常の HTTP リクエストか AJAX 呼び出しかを検出します。それに基づいて、ページ全体または div のコンテンツのみを返します。おそらく、フレームワーク/ツールボックスのドキュメントでヘルパーを探す必要があります。
  3. AJAX 要求を行いますが、JSON オブジェクトを要求します。クライアント側で JSON を HTML に変換して、div のコンテンツを置き換えます。これが「私のアプリは単なる API である」というアプローチです。この JSON エンドポイントは、プレゼンテーションではなくコンテンツのみを運ぶため、他の目的 (モバイル アプリなど) に使用できるため、これは私の個人的なお気に入りです。これは、計算の大部分がクライアント側で行われるため、パフォーマンスの点でも最速の方法になる傾向があります。反対に、これにはより多くの JS を作成する必要があります。
  4. 常にページ全体をレンダリングし、クライアント側で必要なものだけをフィルタリングします。これがバルチョークアプローチです。利点は、サーバーを変更する必要がないことですが、サブセットのみが必要な場合にページ全体を返すと、処理時間と帯域幅が無駄になります。
于 2013-03-19T14:32:45.967 に答える