JQuery 追加 AJAX答案

【问题标题】：JQuery Append AJAXJQuery 追加 AJAX
【发布时间】：2012-05-25 09:32:58
【问题描述】：

我正在使用以下脚本来加载一些 Wordpress 帖子。不幸的是，这替换了我的内容，我想附加到现有内容。

您对使用 AJAX 调用追加的建议是什么。

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

谢谢

【问题讨论】：

标签： javascript jquery ajax append

【解决方案1】：

从听起来你只是想将一个带有新帖子信息的 div 添加到一个已经存在的 div 中，如下面的 html：

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

你可以这样做：

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

【讨论】：

【解决方案2】：

我个人会使用$.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. 
        };
    }
});

【讨论】：

【解决方案3】：

我会使用 getJson 方法来获得一个 JSON 响应，其中我有 3 个部分。一个用于 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);
      });           
   }
});

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

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

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

【讨论】：