jQuery Javascript - 根据 ajax 响应停止表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17097245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript - Stop form submit depending on ajax response
提问by Solid I
I'm wanting to use AJAX to determine whether or not a form's values are acceptable to me (this is not form validation). The AJAX resultwill determine if the form is submitted or not.
我想使用 AJAX 来确定我是否可以接受表单的值（这不是表单验证）。AJAXresult将确定表单是否已提交。
Below, you'll see that I perform an AJAX call when the form is submitted and depending what is returned (either blank which is acceptable, or an error message which is not acceptable), I'd like to return true;or return false;the $("form").submit.
下面，你会看到，当表单提交并根据返回什么我执行一个AJAX调用（无论是空白这是可以接受的，或者这是不能接受的错误信息），我想return true;还是return false;在$("form").submit。
I suspect my trouble to be in the AJAX's success:. Please help me get the resultout of the AJAX call so that I can do something like if (result == "") { return true; } else { return false; }.
我怀疑我的问题出在 AJAX 的success:. 请帮助我result退出 AJAX 调用，以便我可以执行类似if (result == "") { return true; } else { return false; }.
WORKING:
在职的：
$("form").submit(function(e) {
e.preventDefault();
var form = this;
var tray = $('select[name=tray_id]').val();
$.ajax({
type: "POST",
url: "modules/reserve-check.php",
data: {tray_id: tray},
cache: false
}).done(function(result) {
if (result == "")
form.submit();
else
alert(result);
}).fail(function() {
alert('ERROR');
});
});
ORIGINAL:
原来的：
$("form").submit(function() {
var tray = $('select[name=tray_id]').val();
$.ajax({
type: "POST",
url: "modules/reserve-check.php",
data: {tray_id: tray},
cache: false,
success: function(result) {
alert(result);
},
error: function(result) {
alert(result); //This works as expected (blank if acceptable and error msg if not acceptable)
}
});
/*
if (result == "")
return true;
else
return false;
*/
return false; //this is here for debugging, just to stop the form submission
});
回答by adeneo
As the ajax call is asynchronous, you have to prevent the form from submitting, and then when a result is returned, you check if it matches the condition and submit the form with the native submit handler, avoiding the preventDefault()in the jQuery event handler :
由于ajax调用是异步的，你必须阻止表单提交，然后当返回结果时，检查是否符合条件并使用本机提交处理程序提交表单，避免preventDefault()在jQuery事件处理程序中：
$("form").submit(function(e) {
e.preventDefault();
var self = this,
tray = $('select[name=tray_id]').val();
$.ajax({
type: "POST",
url: "modules/reserve-check.php",
data: {tray_id: tray},
cache: false
}).done(function(result) {
if (result == "") self.submit();
}).fail(function() {
alert('error');
});
});
回答by Ouadie
use e.preventDefault();to prevent the form from submitting, and then use this.submit()(isn't calling the jQuery .submit()trigger function, but rather the native <form> .submit()function) to submit the form.
用于e.preventDefault();阻止表单提交，然后使用this.submit()（不是调用jQuery.submit()触发器函数，而是原生<form> .submit()函数）来提交表单。
$("form").submit(function(e) {
e.preventDefault();
var tray = $('select[name=tray_id]').val();
var form = this;
$.ajax({
type: "POST",
url: "modules/reserve-check.php",
data: {tray_id: tray},
cache: false,
complete : function(result){callback(result, form)}
});
});
var callback = function(result, form){
if(!result)
form.submit();
};
