JQuery 追加 AJAX

Posted 2023-03-11

【中文标题】JQuery 追加 AJAX

【英文标题】：JQuery Append 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.                   
                
            
        );          
    
);

谢谢

【参考方案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());
);