[英]How to continue form submission after an AJAX call?
我想在点击提交按钮时验证WordPress帖子上的用户条目,显示有问题的错误消息,如果一切正常,则提交表单。 我有一个PHP函数来执行检查,如果form_data
数据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 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;
});
});
将您的按钮绑定到验证功能而不是提交。 如果它通过验证,请调用submit()。
简短回答:你不能 - 不是这样。
一些背景:作为$.post
等函数的参数提供的回调是异步执行的。 这意味着您将在执行成功回调之前 return proceed
,并且proceed
将始终为false
。 使用断点,如果等到成功回调已执行,则proceed
将为true
,一切都会正常。
因此,如果您想在ajax请求完成后提交表单,则必须使用javascript提交。 使用jQuery非常简单,只需使用data: $("yourForm").serialize()
执行jQuery $.post
data: $("yourForm").serialize()
和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-loading”/按钮,因为它们会在您的ajax调用返回之前立即发生。
Wordpress有自己的机制来处理Ajax请求,使用wp-admin / wp-ajax.php。 这允许您在Ajax边界的任何一侧运行任意代码,而无需编写来回状态检查代码以及所有这些代码。 设置你的回调并去....
真正的问题是 - 你为什么要在验证服务器端? 为什么你不能在之前加载验证标准 - 因为正在撰写帖子? 然后您的验证可以实时发生,而不是提交。
jquery.post是异步执行的,这意味着JS会在收到回复之前继续。 你坚持使用Diodeus的答案 - 将按钮绑定到验证然后提交表单(这使得它不会降级),或者将$ .post更改为ajax并关闭异步,这将迫使它等待响应然后继续...可能会锁定页面上的JS,直到超时为止。
$.ajax({
type: 'POST',
url: ajaxurl,
async:false,
data: data,
timeout:3000,
success: function(){
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.