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

// 在全局作用域定义一个变量，用于存储上一次成功提交的表单数据
var lastSubmissionData = ''; 

jQuery(document).ready(function($) {
    $('#your-form-id').on('submit', function(e) {
        e.preventDefault(); // 阻止表单的默认HTML提交行为

        var $form = $(this);
        var currentFormData = $form.serialize(); // 获取当前表单的序列化数据
        // 如果表单包含复杂数据结构或需要更精确的去重，可以考虑将其转换为JSON字符串：
        // var currentFormData = JSON.stringify($form.serializeArray());

        // 检查当前提交数据是否与上次提交的数据相同
        if (currentFormData === lastSubmissionData) {
            console.log('检测到重复提交，已忽略本次请求。');
            // 可以选择在此处向用户显示一个提示信息
            // alert('请勿重复提交相同内容！');
            return; // 忽略本次提交
        }

        // 如果数据不同，更新缓存变量为当前数据
        lastSubmissionData = currentFormData;

        // 执行AJAX请求
        $.ajax({
            url: your_ajax_object.ajax_url, // WordPress AJAX URL，通常通过wp_localize_script传递
            type: 'POST',
            data: {
                action: 'your_custom_ajax_action', // 你的自定义AJAX动作
                formData: currentFormData,
                // 其他参数...
            },
            beforeSend: function() {
                // 可选：在请求发送前显示加载指示器或禁用提交按钮
                console.log('正在发送AJAX请求...');
            },
            success: function(response) {
                console.log('提交成功！', response);
                // 处理成功响应，例如显示成功消息
                // 如果需要允许用户在成功后立即提交相同数据，可以在此处清空 lastSubmissionData
                // lastSubmissionData = '';
            },
            error: function(xhr, status, error) {
                console.error('提交失败！', error);
                // 处理错误响应
                // 错误发生时，应清空 lastSubmissionData，允许用户重新尝试提交
                lastSubmissionData = ''; 
            },
            complete: function() {
                // 可选：在请求完成后隐藏加载指示器或重新启用提交按钮
                console.log('AJAX请求完成。');
            }
        });
    });
});

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

        var $form = $(this);
        var $submitButton = $form.find('input[type="submit"], button[type="submit"]');
        // 获取所有输入字段，但排除提交按钮本身
        var $inputFields = $form.find('input:not([type="submit"]), select, textarea'); 
        var $loadingIndicator = $form.find('.loading-spinner'); // 假设表单中有一个加载指示器元素

        // 1. 禁用提交按钮和所有输入字段
        $submitButton.prop('disabled', true).addClass('is-loading'); // 添加CSS类以便样式化
        $inputFields.prop('disabled', true);

        // 2. 显示加载指示器
        $loadingIndicator.show(); 

        // 模拟AJAX请求
        $.ajax({
            url: your_ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'your_custom_ajax_action',
                formData: $form.serialize(),
            },
            success: function(response) {
                console.log('提交成功！', response);
                // 处理成功响应
            },
            error: function(xhr, status, error) {
                console.error('提交失败！', error);
                // 处理错误响应
            },
            complete: function() {
                // 3. 无论成功或失败，都在请求完成后重新启用按钮和字段，并隐藏加载指示器
                $submitButton.prop('disabled', false).removeClass('is-loading');
                $inputFields.prop('disabled', false);
                $loadingIndicator.hide();
            }
        });
    });
});

<form id="your-form-id" method="post">
    <!-- 表单字段 -->
    <input type="text" name="name" placeholder="姓名">
    <input type="email" name="email" placeholder="邮箱">
    <input type="password" name="password" placeholder="密码">

    <button type="submit">提交</button>

    <!-- 加载指示器，初始状态隐藏 -->
    <div class="loading-spinner" style="display:none;">
        <div class="spinner"></div> <!-- 旋转动画容器 -->
        <span>正在处理中，请稍候...</span>
    </div>
</form>

/* 加载指示器样式 */
.loading-spinner {
    display: flex;
    align-items: center;
    margin-top: 10px;
    color: #555;
    font-size: 14px;
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border-left-color: #0073aa; /* WordPress默认蓝色 */
    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 {
    cursor: not-allowed;
    opacity: 0.6;
    background-color: #ccc;
    border-color: #ccc;
}