javascript - 使用 PHP 和 AJAX 加载更多评论按钮

Question

我正在开发一个视频评论系统，但不知道如何让我的加载更多按钮起作用。到目前为止，我的控制台没有显示任何错误，但也没有任何反应。我已经检查了我的 PHP 脚本，一切似乎都正常，而且我没有收到任何错误。

我对 JavaScript 还很陌生，所以我认为问题出在某个地方。任何有经验的人都可以看看并向我解释我哪里出错了吗？

视频评论区:

<div class="comments-display">

        <?php 
            //Get Comments from db 
            $get_comments = db::getInstance()->query("SELECT * FROM video_comments WHERE video_id = ? LIMIT 0, {$resultsPerPage}", array($vid_id)); 

            if(!$get_comments->results()){ ?>
                <div class="comment-body">
                    <p class="text-center">No Comments....</p>
                </div>
            <?php

            } else {
                foreach ($get_comments->results() as $comment) { ?>
                <div class="comment-header">
                    <?php echo $comment->username . ' | ' . $comment->added; ?> 

                </div>

                <div class="comment-body">
                    <p><?php echo $comment->comment; ?></p>
                </div>

                <?php
                    $x++; 
                }

                if($x == $resultsPerPage) {
                ?>
                <li class="loadbutton"><button class="loadmore" data-page="2">Load More</button></li>

                <?php 
                } else {
                    echo 'no more comments';
                } 
        }
        ?>
</div>

Ajax 请求:

<script type="text/javascript">
    $( document ).on( 'click', '.loadmore', function () {
         $(this).text('Loading...');
         var btn = $(this).parent('li');
          $.ajax({
            url: 'load.php',
            type: 'POST',
            data: {
              page:$(this).data('page'),
            },
            success: function(response){
              if(response){
                btn.hide();
                $(".comments-display").append(response);
              } else {
                alert("error");
              }
            }
          });
    });
</script>

Load.php

if(isset($_POST['page'])){
    $vid_id = 123; 
    $paged = 2;
    $resultsPerPage = 6; 
    $x = 0;
    if($paged>0){
           $page_limit = $resultsPerPage*($paged-1);
           $query = "LIMIT  {$page_limit}, {$resultsPerPage}";
    }else{
            $query = " LIMIT 0 , {$resultsPerPage}";
    }

    $comments = db::getInstance()->query("SELECT * FROM video_comments WHERE video_id = ? {$query}", array($vid_id)); ?>

    <div id="comments_post" class="comments-display">
                <?php 
                foreach ($comments->results() as $comment) { ?>
                <div class="comment-header">
                <?php echo escape($comment->username) . ' | ' . $comment->added;    
                </div>
                <div class="comment-body">
                    <p><?php echo escape($comment->comment); ?></p>
                </div>
                <?php 
                    $x++;
                }

                if($x == $resultsPerPage) {
                ?>
                <button class="loadmore" data-page="2">Load More</button>
                <?php 
                } else {
                    echo '<h6 class="font-6 text-center pk-blue"> No more Comments! </h6>';

                }?>

    </div>
    <?php 

} 

Answer 1

已修复!

<div id="comments_post" class="comments-block">
    <div class="comments_display">
        <?php 
            $get_comments = db::getInstance()->query("SELECT * FROM video_comments WHERE video_id = ? ORDER BY added DESC LIMIT 0, {$resultsPerPage}", array($vid_id)); 
            if(!$get_comments->results()){ ?>
                <div class="comment-header">
                </div>
                <div class="comment-body">
                    <p class="text-center">No Comments....</p>
                </div>
        <?php

            } else {
                foreach ($get_comments->results() as $comment) { ?>
                <div class="comment-header">
                    <?php echo $comment->username . ' | ' . $comment->added;  

                    if ($user->data()->user_id == $comment->user_id OR $user->hasPermission('admin')) { ?>
                            <i id="<?php echo $comment->id; ?>"class="fa  fa-trash-o onl-link-icon text-right del-com" title="delete comment?"></i>
                        <?php
                    } ?>


                </div>
                <div class="comment-body">
                    <p><?php echo $comment->comment; ?></p>
                </div>
            <?php
                    $x++; 
                }

                if($x == $resultsPerPage) {
                ?>
                <div class="loadbutton"><button class="loadmore" data-page="2">Load More</button></div>

                <?php 
                } else {
                    echo 'no more comments';
                } 
            }
        ?>
</div>
</div>


$( document ).on( 'click', '.loadmore', function () {
       $(this).text('Loading...');
       var btn = $(this).parent();
        $.ajax({
          url: 'load.php',
          type: 'POST',
          cache: false,
          data: {
            page:$(this).data('page'),
          },
          success: function(response){
            if(response){
              btn.hide();
              $(".comments-block").append(response);
            }
          }
        });
  });