解决 jQuery AJAX POST 请求重复提交的策略与实践

// 定义一个全局或作用域内的状态标志变量
// 确保这个变量在所有可能触发 submitLog 的地方都能被访问和修改
var isSubmitting = false;

/**
 * 提交日志内容的 AJAX 请求函数
 */
function submitLog() {
    // 1. 检查状态标志，防止重复提交
    if (isSubmitting) {
        console.log('请求正在处理中，请勿重复提交。');
        return; // 如果正在提交，则直接返回
    }

    // 获取表单数据
    let log = document.getElementById('logContent').value;
    let project = document.getElementById('logger_active_project').innerHTML;
    let category = document.getElementById('categorySelect').value;
    let projectID = document.getElementById('logger_active_project_id').value;
    let submitButton = document.getElementById('submit'); // 提交按钮元素

    // 2. 禁用提交按钮并设置状态标志为 true
    submitButton.disabled = true;
    isSubmitting = true;

    console.log('开始 AJAX POST 请求...');

    // 发起 jQuery AJAX POST 请求
    $.post('./includes/logger/scripts/add_log.php', {
        log: log,
        project: project,
        category: category,
        project_id: projectID
    })
    .done(function(data, status) { // 请求成功回调
        document.getElementById('logContent').value = ""; // 清空输入框
        console.log('AJAX 回调成功：' + data);
        // 可以根据服务器返回的数据进行进一步处理，如显示成功消息
    })
    .fail(function(jqXHR, textStatus, errorThrown) { // 请求失败回调
        console.error('AJAX 请求失败：' + textStatus, errorThrown);
        // 显示错误信息给用户
        alert('提交失败，请稍后再试。');
    })
    .always(function() { // 请求完成（无论成功或失败）回调
        // 3. 重新启用提交按钮并重置状态标志为 false
        submitButton.disabled = false;
        isSubmitting = false;
        console.log('AJAX 请求完成。');
    });
}

/**
 * 设置通过回车键提交日志的事件监听
 * 确保此函数只在页面加载时调用一次
 */
function setupEnterKeySubmission() {
    let logInput = document.getElementById('logContent');
    // 使用 jQuery 的 .off() 和 .on() 确保事件只绑定一次，或在初始化时调用
    $(logInput).off('keyup.submitLog').on('keyup.submitLog', function(event) {
        // Number 13 is the "Enter" key on the keyboard
        if (event.keyCode === 13) {
            event.preventDefault(); // 阻止默认的回车行为，如表单提交
            submitLog();
        }
    });
}

// 页面加载完成后，初始化事件监听器
$(document).ready(function() {
    setupEnterKeySubmission(); // 设置回车键提交
    // 为独立的提交按钮添加事件监听器，同样防止重复绑定
    $('#submit').off('click.submitLog').on('click.submitLog', function(event) {
        event.preventDefault(); // 阻止默认的表单提交行为
        submitLog();
    });
});