使用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); 
      } 
      } 
     }); 
    });