Javascript 使用Ajax和Jquery一次以100个块的形式加载Wordpress文章

我想要一些帮助来更改一点Jquery/Ajax代码。每次我滚动到底部时，下面的代码都会加载一个新的Wordpress帖子

jQuery(function($){
    var page = 1;
    var loading = true;
    var $window = $(window);
    var $content = $("body #ordrene");
    var load_posts = function(){
            $.ajax({
                type       : "GET",
                data       : {numPosts : 1, pageNumber: page},
                dataType   : "html",
                url        : "http://www.mysite.com/wp-content/themes/twentythirteen-child/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();
}); 

jQuery（函数（$）{
var-page=1；
var加载=真；
变量$window=$（window）；
变量$content=$（“body#ordrene”）；
var load_posts=函数（）{
$.ajax({
键入：“获取”，
数据：{numPosts:1，页码：page}，
数据类型：“html”，
url:“http://www.mysite.com/wp-content/themes/twentythirteen-child/loopHandler.php",
beforeSend:function（）{
如果（第！=1页）{
$content.append（“”+
'' +
'');
}
},
成功：功能（数据）{
$data=$（数据）；
if（$data.length）{
$data.hide（）；
$content.append（$data）；
$data.fadeIn（500，函数（）{
$（“#临时加载”）.remove（）；
加载=假；
});
}否则{
$（“#临时加载”）.remove（）；
}
},
错误：函数（jqXHR、textStatus、errorshown）{
$（“#临时加载”）.remove（）；
警报（jqXHR+“：”+textStatus+“：：”+errorshown）；
}
});
}
$window.scroll（函数（）{
var content_offset=$content.offset（）；
console.log（content\u offset.top）；
如果（！loading&&（$window.scrollTop（）+
$window.height（））>（$content.scrollTop（）+$content.height（）+content\u offset.top））{
加载=真；
page++；
加载_柱（）；
}
});
加载_柱（）；
}); 

在我的网站上，我有大约1000篇文章，我想把它们都显示在一个页面上，这样我就可以用jquerysortable对它们进行排序。但是我所在的服务器无法处理一次加载那么多帖子，因此我想使用ajax将对数据库的查询分解为多个块

因此，我想修改上面的代码（或者获得关于全新代码的建议）来做以下工作：在页面加载时，获得100篇文章。加载前100篇文章后，再获取100篇，依此类推，直到我的所有Wordpress文章都加载完毕

如果有人能帮助我，我将非常感激

安德斯

更新：

我的loopHandler.php文件如下所示

<?php
// Our include
define('WP_USE_THEMES', false);
require_once('../../../wp-load.php');

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

echo $numPosts;
echo $page;

$kundenavn = get_the_title();
$category_id = get_cat_ID($kundenavn);

query_posts('cat=' . $category_id . '&posts_per_page=' . $numPosts . '&paged=' . $page);    

if (have_posts()) : while (have_posts()) : the_post(); ?>

    //Content of the loop 

<?php       
endwhile;
endif;

wp_reset_query();
?>

//循环内容

您可以尝试以下方法：

jQuery(function($) {
  var page = 1;
  var loading = true;
  var $window = $(window);
  var $content = $("body #ordrene");
  var load_posts = function() {
    console.log("Loading posts, page is:",page);
    $.ajax({
      type: "GET",
      data: {numPosts: 100, pageNumber: page}, //changed this
      dataType: "html",
      url: "http://www.kundelogg.no/wp-content/themes/twentythirteen-child/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) {
        console.log("Received data, length is:",data.length);
        $data = $(data);
        if ($data.length) {
          $data.hide();
          $content.append($data);
          $data.fadeIn(500, function() {
            $("#temp_load").remove();
            loading = false;
          });
        } else {
          $("#temp_load").remove();
        }
        if (data === "")//make sure php returns empty string if no more posts
          return;
        pageNumber++;//added this
        load_posts();//added this
      },
      error: function(jqXHR, textStatus, errorThrown) {
        $("#temp_load").remove();
        alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
      }
    });
  };
  load_posts();
});

jQuery（函数（$）{
var-page=1；
var加载=真；
变量$window=$（window）；
变量$content=$（“body#ordrene”）；
var load_posts=函数（）{
日志（“加载帖子，页面为：”，第页）；
$.ajax({
键入：“获取”，
数据：{numPosts:100，页码：page}，//更改了此项
数据类型：“html”，
url:“http://www.kundelogg.no/wp-content/themes/twentythirteen-child/loopHandler.php",
beforeSend:function（）{
如果（第！==1页）{
$content.append（“”+
'' +
'');
}
},
成功：功能（数据）{
log（“接收到的数据，长度为：”，data.length）；
$data=$（数据）；
if（$data.length）{
$data.hide（）；
$content.append（$data）；
$data.fadeIn（500，函数（）{
$（“#临时加载”）.remove（）；
加载=假；
});
}否则{
$（“#临时加载”）.remove（）；
}
if（data==“”）//如果没有更多帖子，请确保php返回空字符串
返回；
pageNumber++；//添加了这个
load_posts（）；//添加了这个
},
错误：函数（jqXHR、textStatus、errorshown）{
$（“#临时加载”）.remove（）；
警报（jqXHR+“：”+textStatus+“：：”+errorshown）；
}
});
};
加载_柱（）；
});

看起来这几乎像我希望的那样工作。但它似乎只收到一次帖子。唯一缺少的是，如果有更多的帖子可用，让它重新开始，并继续运行，直到所有帖子都被删除fetched@user2674339你有错误吗？我发布的代码应该可以工作，但是当没有更多的帖子时，你的站点不会返回空字符串，所以它将永远运行（参见注释）。在pageNum++之后，我再次调用load_posts，因此它应该继续抓取，除非出现错误或者您将posts附加到错误的元素。不，我没有收到任何错误。我有一个名为orders.php的“原始”查询文件，它在页面加载时运行，获取10篇文章（posts\u per\u page=10）。然后Ajax开始使用loopHandler.php，您可以在我的帖子的更新中使用它。现在Ajax应该再加载100篇文章，然后再加载100篇。但在前100个帖子之后就停止了，总共给了我110个帖子。10来自原始页面加载，100来自Ajax，一次获取更多帖子。没有错误，一次运行，运行平稳。我将帖子附加到第一个周围的div元素。我一直在玩，没有结果。@user2674339用一些控制台日志更新了答案。在Chrome中按F12键时，可以看到控制台输出。它应该记录多次提取数据。此外，网络选项卡可能会显示一些有关xhr请求的有用信息。同样的问题仍然存在，它只运行一次，但现在可以在控制台中看到，这非常好。但我不知道如何修复它。页码有问题。Se控制台屏幕截图：