PHP+MySQL AJAX评论系统出现递增重复记录，如何修复？

问题根源 #

你的JavaScript代码存在事件绑定嵌套的问题：每次点击#comment-post按钮时，都会给document新增一个#comment-writting form的submit事件监听器。第一次点击后绑定1个监听器，第二次点击再绑定1个，此时触发提交就会执行2次AJAX请求，后续点击次数越多，绑定的监听器数量就越多，导致提交次数递增。

修复步骤 #

1. 移除嵌套的事件绑定逻辑，直接给表单绑定submit事件，避免重复绑定
2. 可选：添加按钮禁用逻辑，防止用户在请求未完成时重复点击

修改后的代码 #

JavaScript 部分 #

// 直接给表单绑定submit事件，无需嵌套在click事件里
$(document).on('submit', '#comment-writting form', function (event) {
    event.preventDefault();
    // 获取提交按钮元素，用于后续禁用
    const submitBtn = $('#comment-post');
    
    if ($('#comment-textarea').val().trim() === '') {
        $('#comment-notice').html('请输入评论内容...').css('color', 'red').show();
        return;
    }

    $('#comment-notice').hide();
    // 禁用按钮，防止重复提交
    submitBtn.prop('disabled', true);
    
    var user_email = $('#user_email').val();
    var user_id = $('#user_id').val();
    var page_url = window.location.search;
    var comment_text = $('#comment-textarea').val();
    
    $.ajax({
        url: "../Ajax/comment.php",
        method: 'POST',
        data: { user_email: user_email, user_id: user_id, page_url: page_url, comment_text: comment_text },
        success: function (response) {
            $('#comment-textarea').val('');
            $('.emojionearea.emojionearea-inline > .emojionearea-editor').empty();
        },
        complete: function() {
            // 请求完成后恢复按钮可用状态
            submitBtn.prop('disabled', false);
        }
    });
});

PHP 部分（优化SQL注入防护，可选但推荐） #

// 评论处理PHP文件
<?php
include '../DB-config/db-config.php';

// 检查所有必填字段是否存在且不为空
if (!empty($_POST['comment_text']) && !empty($_POST['user_email']) && !empty($_POST['user_id']) && !empty($_POST['page_url'])) {
    // 使用预处理语句，避免SQL注入，比real_escape_string更安全
    $stmt = $connection->prepare("INSERT INTO comments (user_id, user_email, page_url, parent_id, comment) VALUES (?, ?, ?, 0, ?)");
    $stmt->bind_param("ssss", $_POST['user_id'], $_POST['user_email'], $_POST['page_url'], $_POST['comment_text']);
    
    $stmt->execute();
    $stmt->close();
}
?>

额外说明 #

• 移除嵌套事件绑定是解决重复提交的核心，从根源上避免了重复绑定监听器
• 添加按钮禁用逻辑是额外防护层，即使用户快速点击按钮，也不会触发多次请求
• PHP部分改用预处理语句，能更有效地防止SQL注入风险，提升系统安全性

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