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

我想在点击提交按钮时验证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: '',
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进行仔细检查后,如果在返回时插入断点,则似乎得到了正确的结果线.只有在我遇到断点时稍稍等了一下,然后继续执行它才能按预期使用有效数据.如果有错误,则会发出警报而不会出现问题.

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

编辑

根据下面的@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: '',
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等函数的参数提供的回调是异步执行的.这意味着您将在执行成功回调之前返回继续,并且继续将始终为false.使用断点,如果等到成功回调已执行,则继续将为true,一切都会正常.

因此,如果您想在ajax请求完成后提交表单,则必须使用Javascript提交.使用jQuery非常简单,只需使用数据执行jQuery $.post：$(“yourForm”).serialize()和url：yourForm.action.

这基本上就是您已经在做的事情,您只需要重复调​​用您实际想要发布数据的URL.

编辑：

另一种方法是在表单上设置一个属性,比如说有效,并在提交处理程序中检查：

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


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

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


编辑：

出于上述相同的原因,您还希望在$.post的回调中启用“ajax-loading”/按钮,因为它们会在您的ajax调用返回之前立即发生.