优化WordPress AJAX表单：防止重复提交的客户端策略

// 在全局作用域或表单处理函数外部定义缓存变量
let lastSubmissionData = '';

document.addEventListener('DOMContentLoaded', function() {
    const myForm = document.getElementById('myAjaxForm'); // 假设你的表单ID是myAjaxForm

    myForm.addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        const formData = new FormData(myForm);
        const formObject = {};
        formData.forEach((value, key) => {
            formObject[key] = value;
        });

        // 将表单数据转换为JSON字符串以便比较
        const currentSubmissionData = JSON.stringify(formObject);

        // 检查是否与上一次提交的数据相同
        if (currentSubmissionData === lastSubmissionData) {
            console.log('检测到重复提交，已忽略。');
            return; // 阻止本次提交
        }

        // 更新缓存
        lastSubmissionData = currentSubmissionData;

        // 执行AJAX提交
        submitFormViaAjax(formData);
    });
});

function submitFormViaAjax(formData) {
    // 模拟AJAX请求
    console.log('正在发送AJAX请求...');
    fetch('your-ajax-endpoint.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('AJAX请求成功:', data);
        // 在此处处理成功响应，例如显示成功消息
        // 如果需要，可以在成功后清除lastSubmissionData，允许再次提交
        // lastSubmissionData = ''; 
    })
    .catch(error => {
        console.error('AJAX请求失败:', error);
        // 在此处处理错误响应
        // 发生错误时，可能需要清除lastSubmissionData，允许用户重新尝试
        // lastSubmissionData = ''; 
    });
}

document.addEventListener('DOMContentLoaded', function() {
    const myForm = document.getElementById('myAjaxForm');
    const submitButton = myForm.querySelector('button[type="submit"]');
    const inputFields = myForm.querySelectorAll('input, select, textarea');
    const loadingIndicator = document.createElement('div');
    loadingIndicator.className = 'loading-spinner'; // 预设CSS样式
    loadingIndicator.innerHTML = '<div class="spinner"></div> <span>正在处理...</span>';
    loadingIndicator.style.display = 'none'; // 初始隐藏

    myForm.appendChild(loadingIndicator); // 将加载指示器添加到表单中

    myForm.addEventListener('submit', function(event) {
        event.preventDefault();

        // 1. 禁用提交按钮和输入字段
        submitButton.disabled = true;
        inputFields.forEach(field => field.disabled = true);

        // 2. 显示加载指示器
        loadingIndicator.style.display = 'block';

        const formData = new FormData(myForm);

        // 3. 执行AJAX提交
        fetch('your-ajax-endpoint.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            console.log('AJAX请求成功:', data);
            // 在此处处理成功响应，例如显示成功消息
        })
        .catch(error => {
            console.error('AJAX请求失败:', error);
            // 在此处处理错误响应
        })
        .finally(() => {
            // 4. 无论成功或失败，恢复元素状态并隐藏加载指示器
            submitButton.disabled = false;
            inputFields.forEach(field => field.disabled = false);
            loadingIndicator.style.display = 'none';
        });
    });
});

/* 示例CSS for loading spinner */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    color: #555;
    font-size: 14px;
}

.loading-spinner .spinner {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}