Question

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

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");

谢谢。

Answer 1

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

因此，除非您编写只提供所需特定div的页面服务器端（例如，通过使用查询字符串），否则您将始终检索整个页面，然后在客户端过滤该结果。

如何jquery。仅加载页面的特定部分？

1 个答案: