WordPress后台文章提交前AJAX请求问题：异步失效同步可行但不推荐

我之前也碰到过类似的异步校验导致表单状态切换异常的情况，咱们一步步把这个问题搞定，同时彻底丢掉同步AJAX这个糟糕的方案。

问题根源分析 #

你原来的异步代码里用e.originalEvent === undefined来区分用户手动提交和代码触发的提交，但这个判断逻辑很容易被后台其他JS干扰——比如有些框架或自定义脚本会修改事件对象，导致这个条件失效，进而让草稿转公开的提交流程卡住。

而同步AJAX虽然能暂时解决功能问题，但它会阻塞整个浏览器线程，用户在请求完成前完全无法操作页面，这绝对是要避免的反模式。

可靠的异步解决方案 #

我们可以用自定义数据标记来替代不稳定的originalEvent判断，确保代码触发的提交能顺利放行，同时保留异步校验的优势：

$('body').on('submit', '#post', function(e) {
    const $form = $(this);
    
    // 检查是否是校验后的代码提交：如果标记存在，移除标记并直接放行
    if ($form.data('isValidated')) {
        $form.removeData('isValidated');
        return true;
    }

    // 先阻止默认提交行为，执行异步校验
    e.preventDefault();

    $.ajax({
        url: '/check.php',
        method: 'POST', // 明确指定请求方法，避免默认GET导致数据丢失
        data: $form.serialize(),
        success: function(answer) {
            // 根据后台返回的校验结果处理，这里假设answer包含校验通过的标识
            if (answer.valid) { // 替换成你实际的校验通过判断条件
                // 设置标记，告诉下一次submit事件这是已经校验过的提交
                $form.data('isValidated', true);
                // 手动触发提交，此时会触发事件但会被上面的判断放行
                $form.submit();
            } else {
                // 校验不通过时的提示，比如显示具体错误信息
                alert('表单校验失败：' + answer.message);
            }
        },
        error: function() {
            // 处理请求失败的情况，别让用户摸不着头脑
            alert('校验请求失败，请刷新页面重试');
        }
    });
});

关键改进点 #

• 自定义数据标记：用data('isValidated')来区分提交类型，这个方式不会被其他JS轻易干扰，比依赖originalEvent可靠得多。
• 明确请求方法：显式设置method: 'POST'，避免默认GET请求导致表单数据（比如草稿/公开的状态参数）传递不全或丢失。
• 完善的错误处理：添加AJAX请求失败的处理逻辑，让用户清楚知道发生了什么，而不是卡在操作界面。
• 避免重复阻止：标记只会在代码提交时存在一次，提交后立即移除，不会影响后续的正常提交操作。

额外注意事项 #

• 确保后台/check.php接口正确接收并处理表单中的状态字段（比如草稿/公开的标识），这是状态切换功能正常的前提。
• 如果后台有其他监听表单提交的JS，检查它们是否也在修改提交行为，必要时调整执行顺序（比如把你的校验逻辑放在最前面）。

内容的提问来源于stack exchange，提问作者John Smith