使用AJAX提交回复后出现重复回复的问题求助

你的问题核心出在前端事件绑定的嵌套逻辑上：每次点击.reply-btn时，都会为.submit-reply元素重复绑定一次点击事件。第一次点击回复按钮时绑定1次事件，第二次点击时再叠加绑定1次，此时点击提交回复会触发2次AJAX请求，导致回复重复显示；刷新页面后事件绑定被重置，所以暂时恢复正常。

修复后的前端代码 #

将提交回复的事件绑定从回复按钮的事件处理函数中移出，改为独立的事件委托，同时调整评论ID的获取方式：

$(document).ready(function () {
    // 提交主评论逻辑（保持不变）
    $(document).on('click', '#submit_comment', function (e) {
        e.preventDefault();
        var comment_text = $('#comment_text').val();
        var url = $('#comment_form').attr('action');
        if (comment_text === "") return;
        $.ajax({
            url: url,
            type: "POST",
            data: {
                comment_text: comment_text,
                comment_posted: 1
            },
            success: function (data) {
                var response = JSON.parse(data);
                if (data === "error") {
                    alert('添加评论时出错，请重试');
                } else {
                    $('#comments-wrapper').prepend(response.comment)
                    $('#comments_count').text(response.comments_count);
                    $('#comment_text').val('');
                }
            }
        });
    });

    // 切换回复表单显示/隐藏
    $(document).on('click', '.reply-btn', function (e) {
        e.preventDefault();
        var comment_id = $(this).data('id');
        $(this).parent().siblings('form#comment_reply_form_' + comment_id).toggle(500);
    });

    // 提交回复逻辑（独立绑定，避免重复绑定）
    $(document).on('click', '.submit-reply', function (e) {
        e.preventDefault();
        var $form = $(this).parent();
        // 从表单的data属性获取对应评论ID
        var comment_id = $form.data('comment-id');
        var reply_textarea = $form.find('textarea');
        var reply_text = reply_textarea.val();
        var url = $form.attr('action');

        if (reply_text === "") return;

        $.ajax({
            url: url,
            type: "POST",
            data: {
                comment_id: comment_id,
                reply_text: reply_text,
                reply_posted: 1
            },
            success: function (data) {
                if (data === "error") {
                    alert('添加回复时出错，请重试');
                } else {
                    $('.replies_wrapper_' + comment_id).append(data);
                    reply_textarea.val('');
                }
            }
        });
    });
});

配合HTML修改 #

需要给回复表单添加data-comment-id属性，值为对应评论的ID，示例：

<form id="comment_reply_form_123" action="你的处理地址" data-comment-id="123">
    <textarea placeholder="输入你的回复..."></textarea>
    <button class="submit-reply">提交回复</button>
</form>

后端代码优化（可选但推荐） #

原后端存在SQL注入风险，建议改用预处理语句修复：

if (isset($_POST['reply_posted'])) {
    global $conn;
    $reply_text = $_POST['reply_text']; 
    $comment_id = $_POST['comment_id']; 

    // 使用预处理语句防止SQL注入
    $sql = "INSERT INTO replies (user_id, comment_id, body, created_at, updated_at) VALUES (?, ?, ?, now(), null)";
    $stmt = mysqli_prepare($conn, $sql);
    mysqli_stmt_bind_param($stmt, "iis", $user_id, $comment_id, $reply_text);
    $result = mysqli_stmt_execute($stmt);

    if ($result) {
        $inserted_id = mysqli_stmt_insert_id($stmt);
        $res = mysqli_query($conn, "SELECT * FROM replies WHERE id=$inserted_id");
        $inserted_reply = mysqli_fetch_assoc($res);

        $reply = "<div class='comment reply clearfix'>
                        <img src='profile.png' alt='' class='profile_pic'>
                        <div class='comment-details'>
                                <span class='comment-name'>" . getUsernameById($inserted_reply['user_id']) . "</span>
                                <span class='comment-date'>" . date('F j, Y ', strtotime($inserted_reply['created_at'])) . "</span>
                                <p>" . $inserted_reply['body'] . "</p>
                                <a class='reply-btn' href='#' data-id='" . $inserted_reply['id'] . "'>reply</a>
                        </div>
                </div>";
        echo $reply;
        exit();
    } else {
        echo "error";
        exit();
    }
}

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