js 防止ajax重复提交

document.getElementById('submitBtn').addEventListener('click', function() {
    var btn = this;
    btn.disabled = true;
    btn.innerHTML = '提交中...';

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/submit', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            btn.disabled = false;
            btn.innerHTML = '提交';
            // 处理成功后的逻辑
        }
    };
    xhr.send();
});

function debounce(func, wait) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
    };
}

document.getElementById('submitBtn').addEventListener('click', debounce(function() {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/submit', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 处理成功后的逻辑
        }
    };
    xhr.send();
}, 1000));

// 前端代码
document.getElementById('submitBtn').addEventListener('click', function() {
    var token = generateToken(); // 生成唯一 Token
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/submit', true);
    xhr.setRequestHeader('X-CSRF-Token', token);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 处理成功后的逻辑
        }
    };
    xhr.send();
});

// 后端代码（Node.js 示例）
app.post('/submit', function(req, res) {
    const token = req.headers['x-csrf-token'];
    if (validateToken(token)) { // 验证 Token 是否有效
        // 处理提交逻辑
        res.send('提交成功');
    } else {
        res.status(403).send('重复提交');
    }
});