加载更多的帖子Ajax按钮

Question

我使用ajax来“加载更多的文章”我在哪里搞错了？

当函数找不到当前类别中的帖子时，也许有某种方式来结束/禁用按钮？

functions.php

  function more_post_ajax(){

    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
    $cat = (isset($_POST['cat'])) ? $_POST['cat'] : '';

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

    $args = array(
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'cat' => $cat,
        'paged'    => $page,
    );

    $loop = new WP_Query($args);

    $out = '';

    if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
        $out .= '<div class="small-12 large-4 columns">
                <h1>'.get_the_title().'</h1>
                <p>'.get_the_content().'</p>
         </div>';

    endwhile;
    endif;
    wp_reset_postdata();
    die($out);
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

main.js

var ppp = 3; // Post per page
var cat = $('#more_posts').data('category');
var pageNumber = 1;


function load_posts(){
    pageNumber++;
    var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp' + ppp + '&action=more_post_ajax';
    $.ajax({
        type: "POST",
        dataType: "html",
        url: ajax_posts.ajaxurl,
        data: str,
        success: function(data){
            var $data = $(data);
            if($data.length){
                $("#ajax-posts").append($data);
                $("#more_posts").attr("disabled",false);
            } else{
                $("#more_posts").attr("disabled",true);
            }
        },
        error : function(jqXHR, textStatus, errorThrown) {
            $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
        }

    });
    return false;
}

$("#more_posts").on("click",function(){ // When btn is pressed.
    $("#more_posts").attr("disabled",true); // Disable the button, temp.
    load_posts();
});

single-category.php

 <div id="ajax-posts" class="row">
        <?php
            $cat = get_queried_object();
            $postsPerPage = 3;
            $args = array(
                    'post_type' => 'post',
                    'posts_per_page' => $postsPerPage,
                    'cat' => $cat ->term_id,
            );

            $loop = new WP_Query($args);

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

         <div class="small-12 large-4 columns">
                <h1><?php the_title(); ?></h1>
                <p><?php the_content(); ?></p>
         </div>

         <?php
                endwhile;
        wp_reset_postdata();
         ?>
    </div>
    <div class="btn" id="more_posts" data-category="<?php echo $cat_id; ?>">>Load More</div>

footer.php脚本

<script type="text/javascript">
    jQuery(document).ready( function($) {
        var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";
        
        // What page we are on.
        var page = 5; 
        // Post per page
        var ppp = 3; 

        $("#more_posts").on("click", function() {
            // When btn is pressed.
            $("#more_posts").attr("disabled",true);

            // Disable the button, temp.
            $.post(ajaxUrl, {
                action: "more_post_ajax",
                offset: (page * ppp) + 1,
                ppp: ppp
            })
            .success(function(posts) {
                page++;
                $("#ajax-posts").append(posts);
                // CHANGE THIS!
                $("#more_posts").attr("disabled", false);
            });
        });
    });
</script>

Answer 1

您可以在ajax中添加启动值和限制值，并从php页面接收它们，并将其放在查询中--我有一个显示用户注释的预代码，您可以随意修改它。

主页

<script>
$(document).ready(function(){
 var limit = 5;
 var start = 0;
 var status = false;
function load_comments(limit, start){
  $.ajax({
   url:"view_comments.php",
   method:"POST",
   data:{limit:limit,start:start},
   cache:false,
   success:function(data){
    $('#load_comments').append(data);
    if(data == ''){
     $('#load_comm_info').html("<div>That's all comments</div>");
     status = true;
    }else{
     $('#load_comm_info').html("<button type='button'>Load more comments</button>");
     status = false;
    }
   }
  });
 }
if(status == false){
  status = true;
  load_comments(limit, start);
 }
 $("#load_comm_info").click(function(){
  if(status == false){
   status = true;
   start = start + limit;
   setTimeout(function(){
    load_comments(limit, start);
   }, 1000);
  }
 });
});
</script>

，这是页面view_comments.php

<?php
if(isset($_POST["start"], $_POST["limit"])){
  $start = $_POST['start'];
  $limit = $_POST['limit'];
  $get_comments = mysqli_prepare($dmgsf_connect, "SELECT * FROM `comments` ORDER BY `id` DESC LIMIT ?, ?");
  mysqli_stmt_bind_param($get_comments, 'ii',$start,$limit);
  mysqli_stmt_execute($get_comments);
  $get_comments_res = mysqli_stmt_get_result($get_comments);
  $get_comments_num = mysqli_num_rows($get_comments_res);
  mysqli_stmt_close($get_comments);
  if($get_comments_num > 0){ ?>
    <?php while($get_comments_rows = mysqli_fetch_assoc($get_comments_res)){ ?>
      <div>
        <span><?php echo $get_comments_rows['comment'];?></span>
      </div>
    <?php }
  } 
}
?>