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

小编典典

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

ajax

我想在点击提交按钮时验证WordPress帖子上的用户条目，显示错误消息是否存在问题，如果一切正常，则提交表单。我有一个PHP函数进行检查，true如果输入的数据form_data还可以，则返回，否则返回一些错误代码。以下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问题改编的，该问题最初对我不起作用，因为未提交表单。我发现，如果绑定到的jQuery函数.submit()返回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;
            });
        });

阅读 375

2020-07-26

共1个答案

小编典典

简短的答案：您不能-不是这种方式。

一些背景：作为函数的参数提供的回调$.post是异步执行的。这意味着您将return proceed 在执行成功回调之前
执行，并且proceed始终为false。有了您的断点，如果等到成功的回调已经执行，proceed将true和一切都会好的。

因此，如果要在ajax请求完成后提交表单，则必须使用javascript提交。使用jQuery非常简单，只需$.post使用data: $("yourForm").serialize()和即可完成jQuery url: yourForm.action。

基本上，这就是您已经在做的事情，您只需要对实际要将数据发布到的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加载” /按钮，因为它是直接在ajax调用返回之前发生的。

2020-07-26