使用 PHP 和 AJAX 加载更多评论按钮答案

【问题标题】：Load more comments button with PHP and AJAX使用 PHP 和 AJAX 加载更多评论按钮
【发布时间】：2016-06-14 14:47:49
【问题描述】：

我正在开发一个视频评论系统，但不知道如何让我的加载更多按钮工作。到目前为止，我的控制台没有显示任何错误，但也没有发生任何事情。我检查了我的 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>

加载.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 

}

【问题讨论】：

按钮文本是否更改为“正在加载...”？
您的控制台是否返回任何内容？您的查询是否在load.php 中触发？你检查过吗？您是否检查过控制台中的$.ajax() 响应？ escape($comment->username) escape() 在哪里定义？你确认if(isset($_POST['page'])){ 被满足了吗？应该是，但无论如何都要检查（添加 else{} 以便它返回一些东西）。 db::getInstance() 是在哪里定义的？您是否包含了您的连接文件？
您是否在添加 jQuery 的位置下方包含您的脚本标签？您正在添加 jQuery，对吗？
@LouisShiggyLombardi 如果按钮没有改变，那么 AJAX 也不会被调用，所以问题出在某个地方。如果控制台中没有 JS 错误，那么这与您的选择器有关，但如果有错误，那应该为您指明正确的方向。
@LouisShiggyLombardi - 如前所述，你不会得到任何 ajax，因为你的事件处理函数甚至没有触发..在你担心你的 ajax 之前关注它..再次..你包括jQuery？在哪里？

标签： javascript php jquery ajax

【解决方案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);
            }
          }
        });
  });

【讨论】：