如何AJAX调用后继续表单提交？ [英] How to continue form submission after an AJAX call?
问题描述
我想验证在击中后提交按钮一个字preSS后用户条目，显示错误消息有问题，并提交形式，如果一切正常。我有一个PHP函数做了检查，返回真如果数据 form_data 是确定的，有些错误$ C $ Ç并非如此。下面的JavaScript发出AJAX请求，并且应该继续提交成功后，检查的形式，但它不会：
jQuery的（文件）。就绪（函数（）{
jQuery的（'＃邮报）。递交（函数（）{
VAR form_data =的jQuery（'＃邮报）serializeArray（）。
VAR数据= {
动作：ep_ pre_submit_validation'，
安全性：'？＆LT; PHP的回声wp_create_nonce（'pre_publish_validation'）; ？＆GT;'，
form_data：jQuery.param（form_data）
};
VAR进行= FALSE;
jQuery.post（ajaxurl，数据，函数（响应）{
如果（response.indexOf（真）GT; -1 ||响应==真）{
继续= TRUE;
} 其他 {
警报（错误：+响应）;
继续= FALSE;
}
}）;
。jQuery的（'＃AJAX加载）隐藏（）;
jQuery的（'＃发布）removeClass移除（按钮伯禁用）。
返回继续; //断点在这里，使code运行
}）;
}）;
在code改编自 WPSE问题，这原本不为我工作的形式没有得到提交。我发现，如果jQuery的功能势必 .submit（）返回true，表单应提交，所以这就是我试图执行。随着code以上，它似乎并没有工作在第一（形式没有得到提交时，有没有错误），但在与萤火虫仔细检查继续似乎得到正确的结果，如果一个断点插在返回继续行。它的工作原理是打算与有效数据的仅如果我等待它有点在打了断点，然后继续执行。如果有错误，如果没有问题就发出警报。
什么是处理这一问题的最佳方法是什么？
修改
基于@Linus回答以下，以下code ++工程，既有效和无效的数据：
jQuery的（文件）。就绪（函数（）{
jQuery的（'＃邮报）。递交（函数（）{
如果（jQuery的（本）的.data（有效））{
返回true;
}
VAR form_data =的jQuery（'＃邮报）serializeArray（）。
VAR数据= {
动作：ep_ pre_submit_validation'，
安全性：'？＆LT; PHP的回声wp_create_nonce（'pre_publish_validation'）; ？＆GT;'，
form_data：jQuery.param（form_data）
};
jQuery.post（ajaxurl，数据，函数（响应）{
如果（response.indexOf（真）GT; -1 ||响应==真）{
jQuery的（＃邮报）的数据（有效，真）.submit（）。
} 其他 {
警报（错误：+响应）;
jQuery的（＃邮报）的数据（有效，假）。
}
//隐藏加载图标，返回键发布到正常
。jQuery的（'＃AJAX加载）隐藏（）;
jQuery的（'＃发布）removeClass移除（按钮伯禁用）。
}）;
返回false;
}）;
}）;
简短的回答：你不能 - 不以这种方式
一些背景：您提供作为参数传递给函数的回调，如 $交是异步执行的。这意味着你将返回继续的在的你成功的回调已被执行，而继续永远是假。有了您的断点，如果等到成功的回调已执行，继续将真键，一切都会好起来。
所以，如果你想你的Ajax请求完成后，提交表单，您的使用JavaScript必须的提交。这是pretty的易于使用jQuery，只是做一个jQuery $交与数据：$（yourForm）序列化（）和网址：yourForm.action
这基本上是你已经在做，你就必须重复调用的URL到你真正要发布的数据。
编辑：
另一种方法是将表单上设置的属性，比如有效，并在提交处理程序检查即：
的jQuery（＃邮报）。递交（函数（）{
如果（$（本）的.data（有效））{
返回true;
}
你的code //休息
}）;
和你的成功回调您的验证ajax请求设置/清除该属性，然后提交：
$（＃邮报）的数据（有效，真）.submit（）。
编辑：
您也希望做你的AJAX装载/按钮启用回调里面 $交基于上述同样的原因 - 因为它是，他们将立即发生，你的Ajax调用返回之前。
I want to validate user entries on a WordPress post upon hitting the submit button, display an error message is there are problems, and submit the form if everything is OK. I have a PHP function that does the checking, returning true if data in form_data is OK, some error code otherwise. The following JavaScript issues the AJAX request, and was supposed to continue submitting the form upon successful checking, but it doesn't:
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
});
});
The code is adapted from a WPSE question, which originally didn't work for me as the form didn't get submitted. I found out that if the jQuery function bound to .submit() returns true, the form should be submitted, so that's what I tried to implement. With the code above, it doesn't seem to work at first (form doesn't get submitted when there are no errors), but upon close inspection with Firebug proceed seems to get the right result if a breakpoint is inserted at the return proceed line. It works as intended with valid data only if I wait it out a bit upon hitting the breakpoint, and then continue execution. If there are errors, the alert is issued without a problem.
What is the best way to handle this?
EDIT
Based on @Linus answer below, the following code works with both valid and invalid data:
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;
});
});
Short answer: You can't - not in this manner.
Some background: The callbacks you supply as arguments to functions such as $.post are executed asynchronously. This means that you will return proceed before your success callback has been executed, and proceed will always be false. With your breakpoint, if you wait until the success callback has executed, proceed will be true and all will be well.
So, if you want to submit the form after your ajax request has finished, you must submit it using javascript. This is pretty easy with jQuery, just do a jQuery $.post with data: $("yourForm").serialize() and url: yourForm.action.
This is basically what you already are doing, you just have to repeat that call to the URL to which you actually want to post the data.
EDIT:
Another way would be to set an attribute on your form, say valid, and in your submit handler check that:
jQuery("#post").submit(function() {
if($(this).data("valid")) {
return true;
}
// Rest of your code
});
And in the success callback for your validation ajax request you would set/clear that attribute, and then submit:
$("#post").data("valid", true).submit();
EDIT:
You also want to do your "ajax-loading"/button enabling inside the callback for $.post for the same reasons stated above - as it is, they will happen immediately, before your ajax call returns.
这篇关于如何AJAX调用后继续表单提交？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
