Javascript JQuery 附加 AJAX

JQuery Append AJAX

提问by thedev

I am using the following script to load some Wordpress posts. Unfortunately this replaces my content and I would like to append to the existing content.

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

What is your suggestion on appending using AJAX call.

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

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

Thanks

谢谢

回答by adeneo

load()replaces the content, but it's basically just a shortcut for $.get, so use that instead.

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

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

If filtering specific elements with load(), you will have to do that yourself.

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

回答by epascarello

load replaces the content of the parent. One way of doing it is loading content to a new div and than appending it to the element.

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

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

回答by Shyju

I would use getJson method to get a JSON response where i have 3 parts. one for the Content , another for the NextLink and Third for the PateNumber. Then i will read the Json Result and use it in the relevant place.

我会使用 getJson 方法来获取 JSON 响应，其中我有 3 个部分。一个用于 Content ，另一个用于 NextLink ，第三个用于 PateNumber 。然后我将阅读 Json 结果并在相关地方使用它。

You can return a JSON like this

你可以像这样返回一个 JSON

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

and in your getJSON, you can read the items and use it

并且在您的 中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);
      });           
   }
});

回答by TimSonOfSteve

Personally I would use $.get()

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

回答by Kirill Fuchs

From the sound of it you just want to add a div with new post information to an already existing div like the html below:

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

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

You can simply do:

你可以简单地做：

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

回答by thecodeparadox

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