使用Ajax和Jquery一次加载100个块的Wordpress帖子

Question

我想要一些帮助来更改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();
}); 

在我的网站上，我有大约1000篇帖子，所有这些我都想显示在一个页面上，这样我就可以用Jquery Sortable对它们进行排序。但是我所在的服务器无法处理我一次加载的那么多帖子，所以我想使用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();
?>

Answer 1

你可以试试这样的东西：

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