Question

我想在点击提交按钮时验证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 question，由于表单未提交，因此最初对我不起作用。我发现如果绑定到.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

将您的按钮绑定到验证功能而不是提交。如果它通过验证，请调用submit（）。

Answer 2

简短回答：你不能 - 不是这样。

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

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

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

修改

另一种方法是在表单上设置一个属性，比如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调用返回之前立即发生。

Answer 3

Wordpress有自己的机制来处理Ajax请求，使用wp-admin / wp-ajax.php。这允许您在Ajax边界的任何一侧运行任意代码，而无需编写来回状态检查代码以及所有这些代码。设置你的回调并去....

Answer 4

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

jquery.post是异步执行的，这意味着JS会在收到回复之前继续。你坚持使用Diodeus的答案 - 将按钮绑定到验证然后提交表单（这使得它不会降级），或者将$ .post更改为ajax并关闭异步，这将迫使它等待响应然后继续...可能会在页面上锁定JS，直到超时为止。

$.ajax({
    type: 'POST',
    url: ajaxurl,
    async:false,
    data: data,
    timeout:3000,
    success: function(){

    }
});

如何在AJAX通话后继续提交表单？

4 个答案: