javascript - 如何在 AJAX 调用后继续提交表单？

Question

我想在点击提交按钮时验证 WordPress 帖子上的用户条目，如果有问题则显示错误消息，如果一切正常则提交表单。我有一个执行检查的 PHP 函数，如果 form_data 中的数据正常，则返回 true，否则返回一些错误代码。以下 JavaScript 发出 AJAX 请求，本应在成功检查后继续提交表单，但它没有:

        jQuery(document).ready(function() {
            jQuery('#post').submit(function() {

                var form_data = jQuery('#post').serializeArray();
                var data = {
                    action: 'ep_pre_submit_validation',
                    security: '<?php echo wp_create_nonce( 'pre_publish_validation' ); ?>',
                    form_data: jQuery.param(form_data),
                };
                var proceed = false;
                jQuery.post(ajaxurl, data, function(response) {
                    if (response.indexOf('true') > -1 || response == true) {
                        proceed = true;
                    } else {
                        alert("Error: " + response);
                        proceed = false;
                    }
                });
                jQuery('#ajax-loading').hide();
                jQuery('#publish').removeClass('button-primary-disabled');
                return proceed; //breakpoint here makes the code run
            });
        });

代码改编自 WPSE question ，最初对我不起作用，因为没有提交表单。我发现如果绑定(bind)到 .submit() 的 jQuery 函数返回 true，则应该提交表单，这就是我试图实现的。使用上面的代码，它一开始似乎不起作用(没有错误时不会提交表单)，但在使用 Firebug proceed 仔细检查后似乎得到了正确的结果，如果断点插入到 return proceed 行。如果我在遇到断点时稍等一下，然后继续执行，它仅可以按预期使用有效数据。如果有错误，则会毫无问题地发出警报。

处理此问题的最佳方法是什么？

编辑

基于下面@Linus 的回答，以下代码适用于有效数据和无效数据:

        jQuery(document).ready(function() {
            jQuery('#post').submit(function() {
                if(jQuery(this).data("valid")) {
                    return true;
                }

                var form_data = jQuery('#post').serializeArray();
                var data = {
                    action: 'ep_pre_submit_validation',
                    security: '<?php echo wp_create_nonce( 'pre_publish_validation' ); ?>',
                    form_data: jQuery.param(form_data),
                };
                jQuery.post(ajaxurl, data, function(response) {
                    if (response.indexOf('true') > -1 || response == true) {
                        jQuery("#post").data("valid", true).submit();
                    } else {
                        alert("Error: " + response);
                        jQuery("#post").data("valid", false);

                    }
                    //hide loading icon, return Publish button to normal
                    jQuery('#ajax-loading').hide();
                    jQuery('#publish').removeClass('button-primary-disabled');
                });
                return false;
            });
        });

Answer 1

简短的回答:你不能 - 不能以这种方式。

一些背景知识:您作为参数提供给函数(例如 $.post)的回调是异步执行的。这意味着您将返回 proceed 之前您的成功回调已被执行，并且 proceed 将始终为 false。使用断点，如果您等到成功回调执行完毕，proceed 将为 true，一切都会顺利进行。

因此，如果您想在 ajax 请求完成后提交表单，您必须使用 javascript 提交它。使用 jQuery 这很容易，只需使用 data: $("yourForm").serialize() 和 url: yourForm.action 做一个 jQuery $.post 。

这基本上就是您已经在做的事情，您只需重复调用您实际要将数据发布到的 URL。

编辑:

另一种方法是在您的表单上设置一个属性，比如 valid，然后在您的 submit 处理程序中检查:

jQuery("#post").submit(function() {
    if($(this).data("valid")) {
        return true;
    }
    // Rest of your code
});

在验证 ajax 请求的成功回调中，您将设置/清除该属性，然后提交:

$("#post").data("valid", true).submit();

编辑:

出于与上述相同的原因，您还想在 $.post 的回调中启用“ajax-loading”/按钮 - 实际上，它们会在您的 ajax 之前立即发生调用返回。