如何使用.done（）回调为请求中加载的新数据运行函数？

Question

我有一个页面显示json提要中的数据，还有一个按钮，单击按钮后会加载更多提要。 我的目的是在页面内为每个提要项添加一些内容。 我已经能够创建一个在页面加载时执行此操作的函数，但是我不确定如何通过异步加载更多数据来实现此功能。

我知道我需要使用.done()回调.done()来完成这项工作，但需要一些有关如何正确实现它的指导。

此函数最初会附加新内容：

function appendFeed() {
$('.feed__item').each(function (index) {
$feedItem = $('.feed__item', $(this));
$feedItem.append('<div class="feed-gallery"></div>');

for (var i = 1; i <= 5; i++) {
var $count = i;
if ($count > 1) {
$('.feed.gallery', $(this)).append('<div><img data-lazy="//placehold.it/50x50"></div>');
};
});
}

单击按钮，即在此引用.done()回调的位置：

$('button').click(function(){
        $.getJSON(uri, function (json, textStatus) {
          // do stuff
        }).done(function (json) {
         // do stuff - in my case this would be appendFeed() 
        });
});

我已经调用了appendFeed()函数，但是如果我将其放在按钮上的.done()回调中，则它将再次追加提要。 如何防止页面上的提要重复？

Answer 1

这就是你的写作方式。

   <script type="text/javascript">
      $.getJSON("/waqar/file.php").done(function (data) {
        $(".output").append(data);
      });
    </script>