如何通过JavaScript AJAX防止Web应用表单重复提交

针对快速点击按钮导致重复记录的问题，核心是在请求处理期间阻止重复触发提交操作，以下是两种适配你现有代码的解决方案：

方案1：添加提交状态锁 #

通过给表单绑定一个提交状态标记，在请求未完成时直接拦截后续提交：

function addFrom(event) {
    event.preventDefault();
    var form = $('#addform');
    
    // 若正在提交，直接返回
    if (form.data('isSubmitting')) return;

    var changeNeeded = true; // 实际业务中根据逻辑赋值
    if (changeNeeded) {
        // 设置提交状态为已触发
        form.data('isSubmitting', true);
        sLoading(form);
        
        $.ajax({
            url: '/api/sheet/' + ID + '/parts',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(payload),
            dataType: 'json',
            success: function(response) {
                sLoaded(form);
                window.location.reload();
            },
            error: function() {
                // 请求失败时恢复状态，允许重新提交
                sLoaded(form);
                form.data('isSubmitting', false);
            }
        });
    } 
};

// 修正原代码选择器错误：表单id是addform，不是addFrom
$('#addform').submit(addFrom);

方案2：利用现有loading状态判断 #

直接通过检查loading元素的显示状态，拦截重复提交：

function addFrom(event) {
    event.preventDefault();
    var form = $('#addform');
    
    // 若处于loading状态，直接返回
    if (!form.find('div.loading').hasClass('d-none')) return;

    var changeNeeded = true; // 实际业务中根据逻辑赋值
    if (changeNeeded) {
        sLoading(form);
        
        $.ajax({
            url: '/api/sheet/' + ID + '/parts',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(payload),
            dataType: 'json',
            success: function(response) {
                sLoaded(form);
                window.location.reload();
            },
            error: function() {
                // 请求失败时恢复状态
                sLoaded(form);
            }
        });
    } 
};

// 修正原代码选择器错误
$('#addform').submit(addFrom);

关键注意点 #

1. 修正原代码中的选择器错误：表单的id是addform，原代码中$('#addFrom')无法正确绑定提交事件，必须改为$('#addform')。
2. 无论请求成功或失败，都要恢复表单状态（成功后页面刷新的情况除外），确保用户可以正常重新提交。

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