AJAX返回的帖子太多

时间:2016-09-03 作者:user1235285

我试图通过AJAX加载帖子,但是下面的代码可以加载页面,在最初的8篇帖子之后,返回就是一切。这似乎没有道理解释为什么在页面加载时它会工作,然后后续的请求会返回这么多结果。

该查询针对同一职位类型的多个类别,类别ID是在单击某个选项卡时获得的(工作正常):

var cat = jQuery(this).attr("id");
这里有什么明显的我遗漏的吗?

//HTML

<div class="aj_load">Loading...</div>
<div id="data"></div>
//AJAX帖子(在页面上)

    var pageNumber = \'1\';

    function load_posts(){

       var cat = jQuery("#tabs li.active").attr("id");   
       jQuery(".aj_load").animate({\'opacity\' : 1}, 300);

       pageNumber++;
       var str = \'&cat=\' + cat + \'&pageNumber=\' + pageNumber + \'&action=load_more\';
       jQuery.ajax({
          type: "POST",
          dataType: "html",
          url: ajaxurl,
          data: str,
          success: function(data){
             var jQuerydata = jQuery(data);
             if(jQuerydata.length){
                jQuery(".aj_load").animate({\'opacity\' : 0}, 300);
                jQuery("#data").append(jQuerydata); 
             }

            },
            error : function(jqXHR, textStatus, errorThrown) {
                jQueryloader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }

        });
        return false;
    }

    // Run load_posts() on document load
        jQuery(document).ready(function(){
            load_posts();
        });

    // Run load_posts() on scroll
    jQuery(document).on(\'scroll\', function() {
       var distanceFromBottom = Math.floor(jQuery(document).height() - jQuery(document).scrollTop() - jQuery(window).height());

   if(distanceFromBottom < 400) {
      load_posts();
   }

});
//AJAX加载更多函数(在functions.php中)

function load_more(){

   $cat = $_REQUEST[\'cat\'];
    $page = $_POST[\'pageNumber\'];

    header("Content-Type: text/html");

    $args = array(
      \'cat\' => $cat,
      \'post_type\' => \'post\',
      \'orderby\' => \'date\',
      \'order\' => \'DESC\',
        \'suppress_filters\' => true,
        \'posts_per_page\' => 8,
        \'paged\' => $page,
    );

    $loop = new WP_Query($args);

    if ($loop -> have_posts()) : while ($loop -> have_posts()) : $loop -> the_post();

        locate_template(\'/parts/news-loop.php\', TRUE, FALSE);

    endwhile; else :

      echo "No More Posts";

    endif;
    wp_reset_postdata();
    die();
}

add_action(\'wp_ajax_nopriv_load_more\', \'load_more\');
add_action(\'wp_ajax_load_more\', \'load_more\');
//循环模板

<?php

    $cats = get_the_category();
    $cat_slug = $cats[0]->slug;

?>

<div class="news-post">

    <h2><?php the_title(); ?> - <?php the_time(\'dS F Y\') ;?></h2>

    <div class="news-line"></div>
    <div class="news-hex <?php echo $cat_slug; ?>"></div>

    <div class="text">

    <p><?php echo wp_trim_words(get_the_content(), 40, \'...\') ?></p>

        <a class="more" href="<?php the_permalink(); ?>">FIND OUT MORE</a>

    </div>

    <div class="clear"></div>

</div>

1 个回复
SO网友:user1235285

好的,所以我不确定这是否是最佳实践,但在使用onclick而不是滚动测试代码后,页面确实会正确加载。我通过添加一个只在AJAX完成后才返回true的条件,解决了结果加载的问题;

// AJAX Posts
var pageNumber = \'0\';
pauseAJAX = \'yes\';

function load_posts(){

   var cat = jQuery("#tabs li.active").attr("id");   
   jQuery(".aj_load").animate({\'opacity\' : 1}, 300);

   pauseAJAX = \'yes\';

       pageNumber++;
    var str = \'&cat=\' + cat + \'&pageNumber=\' + pageNumber + \'&action=load_more\';
    jQuery.ajax({
        type: "POST",
        dataType: "html",
        url: ajaxurl,
        data: str,
        success: function(data){
         var jQuerydata = jQuery(data);
         if(jQuerydata.length){

         jQuery(".aj_load").animate({\'opacity\' : 0}, 300);
         jQuery("#data").append(jQuerydata);
         pauseAJAX = \'no\';   

      }
        },
        error : function(jqXHR, textStatus, errorThrown) {
         jQueryloader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
        }

    });
    return false;
}



jQuery(window).scroll(function(){
   if(jQuery(window).scrollTop() + 400 > jQuery(document).height() - jQuery(window).height() ){
      if(pauseAJAX == \'no\') {
         load_posts();
      };
   };
})