JQuery追加AJAX

Question

我使用以下腳本來加載一些WordPress的帖子。 不幸的是，這取代了我的內容，我想附加到現有的內容。

你對使用AJAX調用追加的建議是什麼？

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

感謝

Answer 1

負載替換父的內容。一種做法是將內容加載到新的div並將其附加到元素。

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

Answer 2

load()替換內容，但它基本上只是$不用彷徨的快捷方式，因此請使用來代替。

$('#load-posts a').click(function() { 
    if(pageNum <= max) { 
     $.get(nextLink + ' article', function(data) { 
      $('#content').append(data); 
     }); 
    } 
}); 

如果使用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

我會使用getJson方法來獲取JSON響應，我有3個部分。一個用於Content，另一個用於NextLink，第三個用於PateNumber。然後我將閱讀Json結果並在相關的地方使用它。

您可以返回一個JSON這樣

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

，並在您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與新的職位信息給一個人準備好現有的div像HTML如下：

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

你可以簡單地做：

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