如何实现无需刷新页面即可显示新发布的评论

当前问题 #

博客评论提交流程为：表单提交后插入数据库，再通过<meta>标签刷新页面跳转到评论区，但新评论无法即时显示，仅手动刷新浏览器才会出现，window.location.reload()也无效。需通过Ajax + jQuery实现无刷新提交并即时展示新评论。

现有相关代码片段：

表单部分 #

$id = (int) $_GET['id']; // 脚本开头获取用户点击的文章ID

<form action="post.php?id=<?php echo $id; ?>" method="post">
<?php
    if ($logged == 'No') {
        $guest = 'Yes';
?>
                <label for="name"><i class="fa fa-user"></i> Your Name:</label>
                <input type="text" name="author" value="" class="form-control" required />
                <br />
<?php
    }
?>
                <label for="input-message"><i class="fa fa-comment"></i> Comment:&nbsp;&nbsp;(255 character limit including spaces and punctuation)</label>
                <textarea id="mylmnt" maxlength="255" name="message" rows="5" class="form-control" required></textarea>
                <b><span id="mylmntLeft"></span></b>
                <br />
<button type="submit" class="btn btn-primary">提交评论</button>
</form>

数据库插入部分 #

$runq = mysqli_query($connect, "INSERT INTO `comments` (`post_id`, `comment`, `user_id`, `date`, `time`, `guest`) VALUES ('$row[id]', '$comment', '$author', '$date', '$time', '$guest')");
echo '<div class="alert alert-success">Your comment has been successfully posted</div>';

页面刷新代码 #

}
echo '<meta http-equiv="refresh" content="0;url=post.php?id=' . $row['id'] . '#comments">';

解决方案 #

步骤1：改造前端表单与添加Ajax逻辑 #

给表单添加唯一ID，绑定jQuery提交事件阻止默认行为，通过Ajax异步发送数据：

<!-- 请确保页面已引入jQuery库，可下载本地文件或使用可靠CDN -->

<form id="commentForm" action="post.php?id=<?php echo $id; ?>" method="post">
<!-- 原有表单内容保持不变 -->
<button type="submit" class="btn btn-primary">提交评论</button>
</form>

<script>
$(document).ready(function() {
    $('#commentForm').submit(function(e) {
        e.preventDefault(); // 阻止默认表单提交
        
        // 序列化表单数据
        var formData = $(this).serialize();
        var postId = <?php echo $id; ?>;
        
        $.ajax({
            url: 'submit_comment.php', // 专门处理评论提交的后端文件
            type: 'POST',
            data: formData + '&post_id=' + postId,
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    // 移除旧提示并显示新的成功消息
                    $('.alert-success').remove();
                    $('#commentForm').before('<div class="alert alert-success">'+response.message+'</div>');
                    
                    // 清空表单与字符计数
                    $('#commentForm')[0].reset();
                    $('#mylmntLeft').text('');
                    
                    // 动态拼接新评论HTML并插入评论区
                    var newComment = `<div class="comment-item">
                        <h5>${response.author}</h5>
                        <p>${response.comment}</p>
                        <small>${response.date} ${response.time}</small>
                    </div>`;
                    
                    $('#commentsList').append(newComment);
                    
                    // 平滑滚动到评论区
                    $('html, body').animate({
                        scrollTop: $('#comments').offset().top
                    }, 500);
                } else {
                    // 显示错误提示
                    $('.alert-danger').remove();
                    $('#commentForm').before('<div class="alert alert-danger">'+response.message+'</div>');
                }
            },
            error: function() {
                $('.alert-danger').remove();
                $('#commentForm').before('<div class="alert alert-danger">提交失败，请稍后重试</div>');
            }
        });
    });
});
</script>

步骤2：创建独立的评论提交后端文件（submit_comment.php） #

将数据库插入逻辑分离，返回JSON格式响应避免页面刷新，同时修复SQL注入风险：

<?php
// 引入数据库连接文件
include 'db_connect.php';

// 获取并过滤参数
$post_id = (int)$_POST['post_id'];
$comment = mysqli_real_escape_string($connect, trim($_POST['message']));
$author = '';
$guest = 'No';

// 处理登录用户与访客逻辑
if ($logged == 'No') {
    $guest = 'Yes';
    $author = mysqli_real_escape_string($connect, trim($_POST['author']));
} else {
    $author = $_SESSION['user_id']; // 假设登录用户ID存储在SESSION中
}

// 获取当前日期时间
$date = date('Y-m-d');
$time = date('H:i:s');

// 使用预处理语句防止SQL注入
$stmt = mysqli_prepare($connect, "INSERT INTO `comments` (`post_id`, `comment`, `user_id`, `date`, `time`, `guest`) VALUES (?, ?, ?, ?, ?, ?)");
mysqli_stmt_bind_param($stmt, 'isssss', $post_id, $comment, $author, $date, $time, $guest);

$response = [];
if (mysqli_stmt_execute($stmt)) {
    $response['success'] = true;
    $response['message'] = '评论提交成功';
    // 返回新评论的渲染所需数据（转义防止XSS）
    $response['author'] = $guest == 'Yes' ? htmlspecialchars($author) : htmlspecialchars($_SESSION['username']);
    $response['comment'] = htmlspecialchars($comment);
    $response['date'] = $date;
    $response['time'] = $time;
} else {
    $response['success'] = false;
    $response['message'] = '评论提交失败：'.mysqli_error($connect);
}

// 清理资源
mysqli_stmt_close($stmt);
mysqli_close($connect);

// 返回JSON响应
header('Content-Type: application/json');
echo json_encode($response);
?>

步骤3：确保评论区容器有明确ID #

在post.php的评论展示区域，给评论列表添加唯一ID，方便动态插入新评论：

<div id="comments">
    <h3>评论区</h3>
    <div id="commentsList">
        <!-- 原有评论循环渲染代码 -->
        <?php
        $commentQuery = mysqli_query($connect, "SELECT * FROM comments WHERE post_id = $id ORDER BY date DESC, time DESC");
        while ($commentRow = mysqli_fetch_assoc($commentQuery)) {
            $commentAuthor = $commentRow['guest'] == 'Yes' ? htmlspecialchars($commentRow['user_id']) : htmlspecialchars(get_username_by_id($commentRow['user_id']));
            echo '<div class="comment-item">';
            echo '<h5>'.$commentAuthor.'</h5>';
            echo '<p>'.htmlspecialchars($commentRow['comment']).'</p>';
            echo '<small>'.$commentRow['date'].' '.$commentRow['time'].'</small>';
            echo '</div>';
        }
        ?>
    </div>
</div>

关键注意事项 #

• SQL注入防护：必须使用预处理语句替代直接变量拼接，避免数据库安全风险。
• XSS攻击防护：所有用户输入的内容输出到页面时，必须用htmlspecialchars()转义。
• Session安全：登录用户的身份信息需通过SESSION验证，禁止直接传递敏感参数。

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