优化WordPress AJAX表单提交：防止重复与提升用户体验

// 全局变量，用于存储上一次提交的表单数据
var lastSubmissionCache = '';

// 假设这是你的表单提交处理函数
jQuery(document).on('submit', '#your-form-id', function(e) {
    e.preventDefault(); // 阻止表单默认提交行为

    var $form = jQuery(this);
    var formData = $form.serializeArray(); // 获取表单数据数组
    var currentSubmissionData = JSON.stringify(formData); // 将数据序列化为JSON字符串

    // 可选：为了处理大型表单或更复杂的场景，可以生成数据的SHA1校验和
    // var currentSubmissionHash = sha1(currentSubmissionData);

    // 比较当前提交数据与缓存
    if (currentSubmissionData === lastSubmissionCache) {
        console.log('检测到重复提交，已忽略。');
        return false; // 阻止本次提交
    }

    // 更新缓存
    lastSubmissionCache = currentSubmissionData;

    // 禁用提交按钮和表单字段，并显示加载指示器（见策略二）
    $form.find('input[type="submit"], button[type="submit"]').prop('disabled', true);
    $form.find('input, select, textarea').prop('disabled', true);
    // 显示加载指示器...

    // 发送AJAX请求
    jQuery.ajax({
        url: ajaxurl, // WordPress AJAX URL
        type: 'POST',
        data: {
            action: 'your_custom_action', // WordPress AJAX action
            form_data: formData
        },
        success: function(response) {
            console.log('提交成功:', response);
            // 处理成功响应
        },
        error: function(xhr, status, error) {
            console.error('提交失败:', error);
            // 处理错误响应
            // 如果提交失败，可能需要清空缓存，以便用户可以重新尝试
            lastSubmissionCache = '';
        },
        complete: function() {
            // 无论成功或失败，都在请求完成后重新启用按钮和字段，并隐藏加载指示器
            $form.find('input[type="submit"], button[type="submit"]').prop('disabled', false);
            $form.find('input, select, textarea').prop('disabled', false);
            // 隐藏加载指示器...
        }
    });
});

// ... (策略一中的代码，包括lastSubmissionCache和表单提交事件处理) ...

jQuery(document).on('submit', '#your-form-id', function(e) {
    e.preventDefault();

    var $form = jQuery(this);
    var $submitButton = $form.find('input[type="submit"], button[type="submit"]');
    var $formFields = $form.find('input, select, textarea');
    var $loadingIndicator = $form.find('.loading-indicator'); // 假设你有一个这样的元素

    var formData = $form.serializeArray();
    var currentSubmissionData = JSON.stringify(formData);

    if (currentSubmissionData === lastSubmissionCache) {
        console.log('检测到重复提交，已忽略。');
        return false;
    }
    lastSubmissionCache = currentSubmissionData;

    // --- 策略二：UI反馈与禁用元素 ---
    $submitButton.prop('disabled', true).addClass('is-loading'); // 禁用按钮并添加加载样式
    $formFields.prop('disabled', true); // 禁用所有表单字段
    $loadingIndicator.show(); // 显示加载指示器

    // 发送AJAX请求
    jQuery.ajax({
        url: ajaxurl,
        type: 'POST',
        data: {
            action: 'your_custom_action',
            form_data: formData
        },
        success: function(response) {
            console.log('提交成功:', response);
            // 处理成功响应，例如显示成功消息
        },
        error: function(xhr, status, error) {
            console.error('提交失败:', error);
            // 处理错误响应，例如显示错误消息
            lastSubmissionCache = ''; // 提交失败，清空缓存允许用户重新尝试
        },
        complete: function() {
            // --- 策略二：恢复元素状态 ---
            $submitButton.prop('disabled', false).removeClass('is-loading'); // 重新启用按钮并移除加载样式
            $formFields.prop('disabled', false); // 重新启用所有表单字段
            $loadingIndicator.hide(); // 隐藏加载指示器
        }
    });
});

<form id="your-form-id">
    <!-- 表单字段 -->
    <input type="text" name="name" />
    <input type="email" name="email" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
    <div class="loading-indicator" style="display:none;">
        <div class="spinner"></div> <!-- 这是一个旋转的图标 -->
        <span>正在提交...</span>
    </div>
</form>

/* 加载指示器容器 */
.loading-indicator {
    display: flex; /* 使用Flexbox布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    margin-top: 10px;
    color: #555;
    font-size: 0.9em;
}

/* 旋转图标样式 */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #0073aa; /* WordPress主色调 */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite; /* 旋转动画 */
    margin-right: 8px;
}

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

/* 提交按钮禁用时的样式 */
button[type="submit"].is-loading,
input[type="submit"].is-loading {
    opacity: 0.7;
    cursor: not-allowed;
}