为PHP评论系统添加数据库加载更多按钮的方案问询

一、修改PHP后端（fetch_comment.php） #

调整接口支持分页查询，同时返回是否还有更多评论的标记，避免SQL注入风险：

<?php
// fetch_comment.php
$connect = new PDO('mysql:host=localhost;dbname=testing', 'root', '');

// 获取分页参数，默认第一页
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$limit = 3; // 每页显示3条顶级评论
$offset = ($page - 1) * $limit;

// 查询当前页的顶级评论（参数绑定防止注入）
$query = "
SELECT * FROM comments 
WHERE parent_comment_id = '0' 
ORDER BY comment_id DESC LIMIT :offset, :limit
";
$statement = $connect->prepare($query);
$statement->bindParam(':offset', $offset, PDO::PARAM_INT);
$statement->bindParam(':limit', $limit, PDO::PARAM_INT);
$statement->execute();
$result = $statement->fetchAll();

// 查询顶级评论总数，判断是否还有更多
$countQuery = "SELECT COUNT(*) FROM comments WHERE parent_comment_id = '0'";
$countStmt = $connect->prepare($countQuery);
$countStmt->execute();
$totalComments = $countStmt->fetchColumn();
$hasMore = ($page * $limit) < $totalComments;

$output = '';
foreach($result as $row)
{
 $output .= '
 <div class="panel panel-default">
  <div class="panel-heading">Par <b>'.$row["comment_sender_name"].'</b> le <i>'.$row["date"].'</i></div>
  <div class="panel-body">'.$row["comment"].'</div>
  <div class="panel-footer" align="right"><button type="button" style="font-size:1rem;"class="btn btn-default reply" id="'.$row["comment_id"].'">Répondre</button></div>
 </div>
 ';
 $output .= get_reply_comment($connect, $row["comment_id"]);
}

// 返回JSON格式数据，包含评论内容和是否还有更多
echo json_encode([
    'comments' => $output,
    'hasMore' => $hasMore
]);

function get_reply_comment($connect, $parent_id = 0, $marginleft = 0)
{
 $query = "
 SELECT * FROM comments WHERE parent_comment_id = :parent_id
 ";
 $output = '';
 $statement = $connect->prepare($query);
 $statement->bindParam(':parent_id', $parent_id, PDO::PARAM_INT);
 $statement->execute();
 $result = $statement->fetchAll();
 $count = $statement->rowCount();
 if($parent_id == 0)
 {
  $marginleft = 0;
 }
 else
 {
  $marginleft = $marginleft + 48;
 }
 if($count > 0)
 {
  foreach($result as $row)
  {
   $output .= '
   <div class="panel panel-default" style="margin-left:'.$marginleft.'px">
    <div class="panel-heading">By <b>'.$row["comment_sender_name"].'</b> le <i>'.$row["date"].'</i></div>
    <div class="panel-body">'.$row["comment"].'</div>
    <div class="panel-footer" align="right"><button type="button" style="font-size:1rem;" class="btn btn-default reply" id="'.$row["comment_id"].'">Répondre</button></div>
   </div>
   ';
   $output .= get_reply_comment($connect, $row["comment_id"], $marginleft);
  }
 }
 return $output;
}
?>

二、更新HTML结构 #

在评论容器下方添加「加载更多」按钮，默认隐藏：

<section class="comments-section" id="comments">
    <h2 class="h2 center">Partagez vos temoignages </h2>
    <p class="paragraph center">Laissez la haine et le mépris à l'extérieur ! Ici on écrit que des choses positives.</p>
    <div class="container">
        <form method="POST" id="comment_form">
            <div class="form-group">
                <input type="text" name="comment_name" id="comment_name" class="form-control" placeholder="Nom ou pseudo" />
            </div>
            <div class="form-group">
                <textarea style="resize: none;" name="comment_content" id="comment_content" class="form-control" placeholder="Redigez votre commentaire" maxlength="700" rows="10"></textarea>
            </div>
            <div class="form-group">
                <input type="hidden" name="comment_id" id="comment_id" value="0" />
                <input type="submit" name="submit" id="submit" class="btn btn-success" value="Publier" />
            </div>
        </form>
        <span id="comment_message"></span>
        <br />
        <div class="all-comments" id="all">
            <div class="content" id="display_comment"></div>
            <!-- 新增加载更多按钮 -->
            <div class="text-center mt-3">
                <button id="loadMoreBtn" class="btn btn-primary" style="display:none;">加载更多评论</button>
            </div>
        </div>
    </div>
</section>

三、添加JavaScript逻辑 #

实现AJAX加载更多功能，同时重新绑定回复按钮事件（确保新加载的评论能触发回复功能）：

$(document).ready(function() {
    let currentPage = 1;
    const limit = 3;

    // 初始化加载第一页评论
    loadComments(currentPage);

    // 加载更多按钮点击事件
    $('#loadMoreBtn').click(function() {
        currentPage++;
        loadComments(currentPage);
    });

    function loadComments(page) {
        $.ajax({
            url: 'fetch_comment.php',
            type: 'GET',
            data: { page: page },
            dataType: 'json',
            beforeSend: function() {
                $('#loadMoreBtn').text('加载中...').prop('disabled', true);
            },
            success: function(response) {
                // 追加新评论到容器
                $('#display_comment').append(response.comments);
                // 更新按钮状态
                if (response.hasMore) {
                    $('#loadMoreBtn').text('加载更多评论').prop('disabled', false);
                } else {
                    $('#loadMoreBtn').hide();
                }
                // 重新绑定回复按钮事件
                bindReplyEvents();
            },
            error: function() {
                $('#loadMoreBtn').text('加载失败，重试').prop('disabled', false);
            }
        });
    }

    // 绑定回复按钮点击事件（兼容新加载的元素）
    function bindReplyEvents() {
        $('.reply').off('click').on('click', function() {
            // 保留原系统的回复逻辑，例如弹出回复框等
            let commentId = $(this).attr('id');
            // 原回复功能代码写在这里
        });
    }
});

注意事项 #

• 确保项目已引入jQuery，否则AJAX功能无法运行
• 检查数据库连接参数是否与实际环境匹配
• 若需要调整每页显示条数，同步修改PHP中的$limit和JS中的limit值

内容的提问来源于stack exchange，提问作者Stefan Saulic