如何jQuery的。只加载页面的特定部分？

此代码在我的wordpress网站上的帖子的下一页拉。它针对页面的特定部分，div <div id="blog-grid">，并且只将该部分拉入我的页面。它在前端看起来很不错，但是，当我检查它在控制台上得到的响应时，它会响应整个页面而不仅仅是“博客网格”。这会使页面变慢并加载不必要的内容。我如何修改此代码以请求或仅获得页面特定部分的响应（<div id="blog-grid">）？我是阿贾克斯的初学者，在过去的几个小时里，我一直在为此而头痛。如何jQuery的。只加载页面的特定部分？

jQuery(function(){ 
    var page = 2; 
    var loadmore = 'on'; 
    jQuery(document).on('scroll resize', function() { 
     if (jQuery(window).scrollTop() + jQuery(window).height() + 700 > jQuery(document).height()) { 
     if (loadmore === 'on') { 
      loadmore = 'off'; 
      jQuery('#spinner').css('visibility', 'visible'); 
      jQuery('#lazyload').append(jQuery('<div class="blog-grid" id="p' + page + '">').load(global.getPermalink + "page/" + page + ' #grid-item', function() { 
      page++; 
      loadmore = 'on'; 
      jQuery('#spinner').css('visibility', 'hidden'); 
      })); 
     } 
     } 
    }); 
    jQuery(document).ajaxComplete(function(event, xhr, options) { 
     if ($(".blog-grid").is(':empty')) 
     { 
      loadmore = 'off'; 
      $(".all-posts-message").fadeIn(600); 
      setTimeout(function(){ 
       $(".all-posts-message").fadeOut(600); 
       }, 5000); 
     } 
     if (xhr.responseText.indexOf('class="blog-grid"') === -1) { 
     } 

     //blog grid 
    var small_blocks2 = $('.blog-grid > div:nth-child(5n+3), .blog-grid > div:nth-child(5n+4), .blog-grid > div:nth-child(5n+5)').not(".block-1, .block-2"); 
    $(small_blocks2).addClass("col-xs-4 block-sm"); 

    }); 
}); //blog grid add classes after new content is inserted 
    var block_1 = $(".grid-item").eq(0) 
     $(block_1).addClass("col-xs-8 block-lg block-1");

谢谢。

来源

2016-02-26 beliy333

没有办法做到这一点。 Ajax只会在您提供的任何网址上请求完整资源。简单地说，jQuery.load（）只能检索可以手动浏览到的相同资源。

所以，除非你编码的页面服务器端将只提供你想要的特定的div（例如通过使用查询字符串），否则你将总是检索整个页面，然后过滤结果客户端。

来源

2016-02-26 07:43:02

如何jQuery的。只加载页面的特定部分？

回答

相关问题