AJAX请求仅发送一次但表单数据重复写入数据库问题排查

最近踩了个坑，分享给大家避避：我用AJAX提交表单数据，明明在Firefox里只看到一次POST请求，结果数据库里却多出了重复记录。折腾半天终于找到原因，下面是详细过程。

相关代码 #

AJAX提交函数 #

function uploadProjects() {
    let projectName = $('#projectName').val();
    let description = $('#description').val();
    let estimatedTime = $('#estimatedTime').val();
    let actualTime = $('#actualTime').val();
    const formData = {
        projectName: projectName,
        description: description,
        estimatedTime: estimatedTime,
        actualTime: actualTime,
    };
    event.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'http://localhost/WBS/php/api/objects/Project.php',
        data: formData,
        success: (response) => {
            console.log(`The data ${JSON.stringify(response)} has been uploaded`);
            $('#alert').fadeIn(() => {
                setTimeout(() => {
                    $('#alert').fadeOut();
                }, 5000);
            });
        },
        error: (response) => {
            console.error(
                `Something went wrong uploading the data ${JSON.stringify(response)}`
            );
            $('#alertFailed').fadeIn(() => {
                setTimeout(() => {
                    $('#alertFailed').fadeOut();
                }, 5000);
            });
        },
    });
}

事件绑定与触发按钮 #

事件绑定逻辑：

$(document).ready(() => {
    $('#addProject').one('click', () => {
        uploadProjects();
    });
});

触发按钮的HTML：

<button id="addProject" form="js-projects" class="btn btn-success" type="submit"><i class="fa fa-angle-right" aria-hidden="true"></i> Add a project</button>

排查过程 #

一开始我全盯着前端找问题：

• 确认按钮用了one('click')，不会重复绑定事件；
• 打开Firefox的网络面板监控，确实只有一次POST请求发送出去；
• 检查了event.preventDefault()，也正确阻止了表单的默认提交行为。

折腾了好一会儿才意识到，问题可能出在后端！去看Project.php的代码，发现自己犯了个低级错误——重复写了两次插入数据的SQL查询语句！这就导致单次请求被后端处理时，执行了两次数据库插入，最终造成了重复记录。

总结 #

如果遇到「前端只发送一次请求，但数据库出现重复数据」的情况，别死磕前端，一定要检查后端代码是否存在重复执行SQL的疏忽，这种小错误很容易被忽略，但影响却不小。

内容的提问来源于stack exchange，提问作者niels van hoof