jQuery - 在 ajax 调用后恢复表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16415740/
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
jQuery - Resume form submit after ajax call
提问by adamj
Is it possible to stop a form from submitting and then resubmitting the same form from within the success of an ajax call?
是否可以阻止表单提交，然后在 ajax 调用成功后重新提交相同的表单？
At the moment it gets to the success bit but it doesn't resubmit the form which should submit and redirect the user to the http://example.comwebsite.
目前它到达成功位，但它不会重新提交应该提交并将用户重定向到http://example.com网站的表单。
Thank you very much for any help in advance
非常感谢您提前提供任何帮助
If it's not possible to do it this way, is there another way of getting it to work?
如果不可能以这种方式做到这一点，是否有另一种方法可以让它发挥作用？
$(document).ready(function() {
$('form').submit(function(e) {
e.preventDefault();
$.ajax({
url: $('form').attr('action'),
type: 'post',
data: $('form').serialize(),
success: function(data) {
if (data == 'true')
{
$('form').attr('action', 'http://example.com');
$('form').unbind('submit').submit(); // mistake: changed $(this) to $('form') - Problem still persists though it does not resubmit and redirect to http://example.com
}
else
{
alert('Your username/password are incorrect');
}
},
error: function() {
alert('There has been an error, please alert us immediately');
}
});
});
});
Edit:
编辑：
Stackoverflow posts checked out for the code below:
Stackoverflow 帖子检查了以下代码：
I just thought I'd mention I have also tried this code without avail.
我只是想我会提到我也尝试过这段代码但没有成功。
var ajaxSent = false;
$(document).ready(function() {
$('form').submit(function(e) {
if ( !ajaxSent)
e.preventDefault();
$.ajax({
url: $('form').attr('action'),
type: 'post',
data: $('form').serialize(),
success: function(data) {
if (data == 'true')
{
alert('submit form');
ajaxSent = true;
$('form').attr('action', 'http://example.com');
$('form').submit();
return true;
}
else
{
alert('Your username/password are incorrect');
return false;
}
},
error: function() {
alert('There has been an error, please alert us immediately');
return false;
}
});
});
});
I have also tried this code without any luck as well.
我也试过这个代码，但没有任何运气。
$(document).ready(function() {
$('form').submit(function(e) {
e.preventDefault();
$.ajax({
url: $('form').attr('action'),
type: 'post',
data: $('form').serialize(),
success: function(data) {
if (data == 'true')
{
$('form').attr('action', 'http://example.com');
$('form').unbind('submit').submit();
return true;
}
else
{
alert('Your username/password are incorrect');
return false;
}
},
error: function() {
alert('There has been an error, please alert us immediately');
return false;
}
});
});
});
回答by adamj
Solution was quite simple and involved adding and setting async to false in .ajax(). In addition, I have re-worked the code to work of the submit button instead which submits the form when the AJAX passes successfully.
解决方案非常简单，涉及在 .ajax() 中添加和设置 async 为 false。此外，我重新编写了提交按钮的代码，而不是在 AJAX 成功通过时提交表单。
Here is my working code:
这是我的工作代码：
$(document).ready(function() {
var testing = false;
$('#btn-login').on('click', function() {
$.ajax({
url: $('form').attr('action'),
type: 'post',
data: $('form').serialize(),
async: false,
success: function(data) {
if (data == 'true')
{
testing = true;
$('form').attr('action', 'https://example.com');
$('form').submit();
}
else
{
alert('Your username/password are incorrect');
}
},
error: function() {
alert('There has been an error, please alert us immediately');
}
});
return testing;
});
});
回答by Simon
It's no good practice to reselect all form tags throughout your code, what if you have multiple forms on the page?
Also you'd better use .on()and .off()with jQuery.
在整个代码中重新选择所有表单标签并不是一个好习惯，如果页面上有多个表单怎么办？此外，您最好使用jQuery.on()和.off()jQuery。
$(document).ready(function() {
$('form').on('submit', function(e) {
e.preventDefault();
// cache the current form so you make sure to only have data from this one
var form = this,
$form = $(form);
$.ajax({
url: form.action,
type: form.method,
data: $form.serialize(),
success: function(data) {
if (data == 'true')
{
$form.attr('action', 'http://example.com').off('submit').submit();
}
else
{
alert('Your username/password are incorrect');
}
},
error: function() {
alert('There has been an error, please alert us immediately');
}
});
});
});
回答by Anthony Grist
In one line you use $('form')to select the form to change its action, but then you use $(this)to try to select that same form. I would guess that thisinside the callback function isn't what you expect it to be, and is something other than your form (possibly the windowobject).
在一行中，您用于$('form')选择表单以更改其操作，但随后您$(this)尝试选择相同的表单。我猜想this在回调函数内部不是你期望的那样，而是你的表单（可能是window对象）之外的东西。
Just chain the calls:
只需链接调用：
$('form').attr('action', 'http://example.com').unbind('submit').submit();
