JQuery Append AJAX

Question

次のスクリプトを使用してWordpressの投稿を読み込んでいます。 残念ながら、これは私のコンテンツを置き換え、私は既存のコンテンツに追加したいと思います。

AJAX呼び出しを使用した追加に関する提案はありますか。

Answer 1

負荷

$('#load-posts a').click(function() { 
    if(pageNum <= max) { 
     $('#content').load(nextLink + ' article', 
      function() {    
       // Update page number and nextLink. 
       // Update the button message.     
       } 
      } 
     );   
    } 
}); 

おかげで、親の内容を置き換えます。これを行う1つの方法は、新しいdivにコンテンツをロードし、それを要素に追加することです。

$("<div>").load(nextLink + ' article', function() { 
    $("#content").append($(this).html()); 
}); 

Answer 2

load()コンテンツを置き換えますが、それは基本的に$に.getのためだけのショートカットですので、代わりにそれを使用。

特定の要素をload（）でフィルタリングする場合は、自分で行う必要があります。

Answer 3

if(pageNum <= max) { 
     $('body').append($('<div id="hiddenContainer" style="display:none"></div>')); // a hidden container to store response 
     $('#hiddenContainer').load(nextLink + ' article', 
      function() {    
       $('#content').append($('#hiddenContainer').html());     
       } 
      } 
     );   
    } 

Answer 4

私は3つの部分を持つJSON応答を取得するためにgetJsonメソッドを使用します。 1つはコンテンツ用、もう1つはNextLink用、3つ目はPateNumber用です。それから、私はJson Resultを読んで、関連する場所で使用します。

あなたはこの

{ 
    "Content": "<p>Some New Content</p>", 
    "NextLink": "page.php?no=34", 
    "PageNumber": "34" 
} 

のようなJSONを返すことができますし、あなたのgetJSONに、あなたがアイテムを読み、

$('#load-posts a').click(function() { 
    if(pageNum <= max) { 
     $.getJSON(nextLink,function(jSonResult){   
      $('#content').append(jSonResult.Content); 
      $("#nextLink").html(jSonResult.NextLink); 
      $("#pageNumber").html(jSonResult.PageNumber); 
     });   
    } 
}); 

Answer 5

個人的に私は$.get()

$('#load-posts a').click(function() { 
    if(pageNum <= max) { 
     var nextArticles = $.get(nextLink + ' article') 

     nextArticles.success(function() { 
      // Update page number and nextLink. 
      // Update the button message. 
     }; 
    } 
}); 

Answer 6

を使用することになり、それを使用することができますそのサウンドから、新しい投稿情報を含むdivをalに追加したいだけです下記のHTMLのような準備ができて、既存のdiv：

<div id="Posts"> 
    <!-- post --> 
    <!-- post --> 
    <!-- post --> 
</div> 

あなたは、単に行うことができます。

jQuery('#Posts').append(jQuery('<div>').load(...));