如何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的。只加載頁面的特定部分？

回答

相關問題