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

How to continue form submission after an AJAX call?

本文关键字：继续 表单提交 调用 AJAX      更新时间：2023-09-26

我想在点击提交按钮时验证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问题，最初对我不起作用，因为表单没有提交。我发现，如果绑定到.submit()的jQuery函数返回true，那么应该提交表单，所以这就是我试图实现的。对于上面的代码，它一开始似乎不起作用（在没有错误的情况下不会提交表单），但经过Firebug的仔细检查，如果在return proceed行插入断点，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;
            });
        });

简短的回答：你不能——不能用这种方式。

一些背景：作为参数提供给函数（如$.post）的回调是异步执行的。这意味着您将在执行成功回调之前执行return 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加载"/按钮——事实上，它们将在ajax调用返回之前立即发生。

将按钮绑定到验证函数，而不是提交。如果它通过了验证，请调用submit（）。

Wordpress有自己的机制来处理Ajax请求，使用wp-admin/wp-ax.php。这允许您在Ajax边界的任何一侧运行任意代码，而不必编写来回的状态检查代码等等。设置你的回调并开始。。。。

真正的问题是-为什么要在服务器端进行验证？为什么你不能在写帖子之前加载验证标准？然后您的验证可以实时进行，而不是在提交时进行。

jquery.post是异步执行的，这意味着JS在得到回复之前将继续。你被Diodeus的答案卡住了——将按钮绑定到validtion，然后validtion提交表单（这使它不会很好地降级），或者将$.post更改为ajax并关闭async，这将迫使它在继续之前等待响应。。。可能会将JS锁定在您的页面上，直到超时。

$.ajax({
    type: 'POST',
    url: ajaxurl,
    async:false,
    data: data,
    timeout:3000,
    success: function(){
    }
});
相关文章：