javascript - 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

load()替换内容，但它基本上只是 $.get 的快捷方式，因此请改用它。

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

如果使用 load() 过滤特定元素，则必须自己执行此操作。

Answer 2

load 替换父级的内容。一种方法是将内容加载到新的 div 中，然后将其附加到元素中。

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

Answer 3

我会使用 getJson 方法来获取我有 3 个部分的 JSON 响应。一个用于 Content ，另一个用于 NextLink 和第三个用于 PateNumber。然后我将阅读 Json Result 并在相关位置使用它。

您可以像这样返回 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 4

从它的声音来看，您只想将带有新帖子信息的 div 添加到已经存在的 div 中，如下面的 html：

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

你可以简单地做：

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

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

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());                 
                }
            }
        );          
    }