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

Question

I would like some help to change a bit og Jquery/Ajax code. The following code loads a new Wordpress post every time i scroll to the bottom

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

On my site i have about 1000 posts, all which i want to display on one page so that i am able to sort them with Jquery Sortable. But the server i am on can't handle that many posts loading i one go, so i would like to ue ajax to break the query to the database up into multiple chunks.

Therefor i would like to alter the code above (or get advice on brand new code) to do the following: On page load, get 100 posts. When the first 100 posts are loaded, fetch 100 more, And so on until all my Wordpress posts are loaded.

If anyone is able to help me, i would really appreciate it!

Anders

UPDATE:

My loopHandler.php file looks like this

<?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

You could try something like this:

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