AJAX循環爲WordPress（不同類別的職位）

Question

我嘗試從Tuts+ 我想這個循環下單後頁面的評論形式展現在三列（每另一個類別）

實現AJAX帖子循環爲WordPress

在single.php中我的div（數字來自類別）：

<div class="news_posts-6"></div> 
<div class="news_posts-3"></div> 
<div class="news_posts-2"></div> 

我ajaxLoop：

jQuery(function($){ 
var page = 1; 
var loading = true; 
var $window = $(window); 
var cat = [6,3,2]; 

var load_posts= jQuery.each(cat, function(){ 


     var $content = $(".news_posts-" + this); 

     $.ajax({ 
      type  : "GET", 
      data  : {numPosts: 2, pageNumber: page, cat: this}, 
      dataType : "html", 
      url  : "http://127.0.0.1:4001/wordpress/wp-content/themes/twentyeleven-child-theme/loopHandler.php", 
      beforeSend : function(){ 
       if(page != 1){ 
        $content.append('<div id="temp_load" style="text-align:center">\ 
         <img src="/images/ajax-loader.gif" />\ 
         </div>'); 
       } 
      }, 
      success : function(data){ 
       $data = $(data); 
       if($data.length){ 
        $data.hide(); 
        $content.append($data); 
        $data.fadeIn(500, function(){ 
         $("#temp_load").remove(); 
         loading = false; 
        }); 
       } else { 
        $("#temp_load").remove(); 
       } 
      }, 
      error  : function(jqXHR, textStatus, errorThrown) { 
       $("#temp_load").remove(); 
       alert(jqXHR + " :: " + textStatus + " :: " + errorThrown); 
      } 
    }); 


}); 

$window.scroll(function() { 
    var content_offset = $content.offset(); 
    console.log(content_offset.top); 
    if(!loading && ($window.scrollTop() + 
     $window.height()) > ($content.scrollTop() + $content.height() + content_offset.top)) { 
      loading = true; 
      page++; 
      load_posts(); 
    } 
});  
load_posts(); 
}); 

loopH的部分andler.php：

$numPosts = (isset($_GET['numPosts'])) ? $_GET['numPosts'] : 0; 
$page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0; 
$cat = (isset($_GET['cat'])) ? $_GET['cat'] : 0; 

echo $numPosts; 
echo $page; 

query_posts(array(
     'posts_per_page' => $numPosts, 
     'paged'   => $page, 
     'cat'   => $cat 
)); 

我試過使用包含類別數字的簡單數組，但它不起作用。取決於

data  : {numPosts: X, pageNumber: page, cat: this}, 

在每列中顯示X帖子（來自第一類的帖子相同）。

我想我需要使用JSON，我嘗試過，但它是完全災難（我不知道如何把它放在一起）。我只需要爲三個不同的參數調用AJAX。

感謝您的任何幫助

Answer 1

那麼，有多種方法可以解決這個問題。

一種方法是首先循環您的類別客戶端，併爲每個類別分別提出請求。這就是你在代碼中實質上正在做的事情。您正在遍歷一系列類別併爲每個類別提出請求。

另一種方法是將該類別的數組傳遞給您的處理程序。所有你需要做的就是修改你的處理程序來接受一個整數或類別的數組。然後你可以返回一個JSON對象。但是這涉及到更多的編輯，並且它不能解決每個部分具有不同大小和高度的問題。

因此，下面我修改了一些代碼，以便跟蹤多個部分。我們只需要幾個小小的編輯：

• 每個部分都需要有一個類別號，分頁號，內容部分和一個標誌，不管它是否加載。每個需要存儲在一個單一的列表中進行跟蹤。
• 我們需要迭代每個類別來初始化它。
• 我們需要遍歷每個類別的窗口滾動，並檢查下一項目應該被載入
• 我們需要確保每個請求所涉及到所請求的類

開始通過修改div的一小（這只是一個偏好的事，我更喜歡存儲的屬性，而不是一類這樣的元數據）：

<div class="news_posts" data-category="6"></div> 
<div class="news_posts" data-category="3"></div> 
<div class="news_posts" data-category="2"></div> 

這裏有一個修改JS（請注意，我改變了一些變量和函數名） ：

jQuery(function($){ 
    var $window = $(window); 
    var cats = []; 
    var contentDivs = $(".news_posts"); 

    var initializeCats = function(){ 
     // adds category objects to a list for tracking 
     for(var i = 0; i < contentDivs.length; i++){ 
      var catNum = $(contentDivs[i]).attr("data-category"); 
      var cat = { 
       catNum : catNum, 
       catPage : 1, 
       loading : true, 
       catDiv : $(contentDivs[i]); 
      }; 

      cats.push(cat); 

      load_post(cat); 
     } 
    }; 

    var load_post = function(cat) { 
     $.ajax({ 
      type  : "GET", 
      data  : { 
       numPosts : 2, 
       pageNumber : cat.catPage, 
       cat  : cat.catNum 
      }, 
      dataType : "html", 
      url  : "http://127.0.0.1:4001/wordpress/wp-content/themes/twentyeleven-child-theme/loopHandler.php", 
      beforeSend : function(){ 
       if(page != 1){ 
        // this was a bad idea when i wrote the article originally 
        // never concatenate strings on multiple lines by escaping 
        // the carriage return 
        // $content.append('<div id="temp_load" style="text-align:center">\ 
        // <img src="/images/ajax-loader.gif" />\ 
        // </div>'); 

        cat.catDiv.append("<div class='temp_load' style='text-align:center'>" + 
         "<img src='/images/ajax-loader.gif' />" + 
         "</div>"); 
       } 
      }, 
      success : function(data){ 
       $data = $(data); 

       if($data.length){ 
        $data.hide(); 
        cat.catDiv.append($data); 

        $data.fadeIn(500, function(){ 
         cat.catDiv.find(".temp_load").remove(); 
         cat.loading = false; 
        }); 
       } else { 
        cat.catDiv.find(".temp_load").remove(); 
       } 
      }, 
      error  : function(jqXHR, textStatus, errorThrown) { 
       cat.catDiv.find(".temp_load").remove(); 
       alert(jqXHR + " :: " + textStatus + " :: " + errorThrown); 
      } 
     }); 
    }); 

    var onWindowScroll = function(){ 
     for(var i = 0; i < cats.length; i++){ 
      var cat = cats[i]; 
      var contentDiv = cat.catDiv; 
      var content_offset = contentDiv.offset();        

      if(!cat.loading && 
       ($window.scrollTop() + $window.height()) > 
       (contentDiv.scrollTop() + contentDiv.outerHeight() + content_offset.top) 
      ) { 
       cat.loading = true; 
       cat.catPage++; 

       load_post(cat); 
      } 
     } 
    } 

    initializeCats(); 
    $window.scroll(onWindowScroll);  

}); 

的PHP文件幾乎是一樣的，只是註釋掉echo $numPosts行：

$numPosts = (isset($_GET['numPosts'])) ? $_GET['numPosts'] : 0; 
$page  = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0; 
$cat  = (isset($_GET['cat']))  ? $_GET['cat']  : 0; 

// echo $numPosts; 
echo $page; 

query_posts(array(
     'posts_per_page' => $numPosts, 
     'paged'   => $page, 
     'cat'   => $cat 
)); 

這只是一些我迅速颳起。 我沒有測試過它。試試看，注意語法錯誤，並且交叉你的手指:)。我希望這會對你有用，如果沒有，我們可以考慮修改它，這樣做。