0

我尝试从Tuts+为 WordPress 实现 AJAX 帖子循环 我希望这个循环显示在三个列的单个帖子页面的评论表单下（每个用于另一个类别）

在 single.php 我有 div（数字来自类别）：

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

我的ajax循环：

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();
});

loopHandler.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。

谢谢你的帮助

4

1 回答 1

0

嗯，有多种方法可以解决这个问题。

一种方法是首先在您的类别客户端上循环，并为每个类别提出单独的请求。这就是您在代码中本质上所做的事情。您正在迭代一系列类别并为每个类别发出请求。

另一种方法是将类别数组传递给您的处理程序。您需要做的就是修改您的处理程序以接受整数或类别数组。然后您可以返回一个 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
));

这只是我快速完成的事情。我没有测试过。试试看，注意语法错误，然后交叉手指:)。我希望这对您有用，如果没有，我们可以考虑对其进行修改以使其有效。

于 2013-03-05T07:27:39.627 回答