jQuery – 在ajax调用之后恢复表单提交

是否可以阻止表单提交，然后在ajax调用成功中重新提交相同的表单？

目前它获得了成功，但它没有重新提交应该提交的表单并将用户重定向到http://example.com网站。

非常感谢您提前提供任何帮助

如果不可能这样做，还有另一种方法让它发挥作用吗？

$(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'); } }); }); }); 

编辑：

Stackoverflowpost签出以下代码：

• $ .ajax调用后恢复表单提交
• 如何重新启用event.preventDefault？

我只是想我提到我也试过这个代码而没有用。

 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; } }); }); }); 

我也试过这个代码而没有任何运气。

 $(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; } }); }); }); 

Answer 1

解决方案非常简单，涉及在.ajax（）中添加和设置async为false。 另外，我已经重新编写了代码来处理提交按钮，而是在AJAX成功通过时提交表单。

这是我的工作代码：

 $(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; }); }); 

Answer 2

在整个代码中重新选择所有表单标签并不是一个好习惯，如果页面上有多个表单，该怎么办？ 你最好还是使用.on()和.on()和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'); } }); }); }); 

Answer 3

在一行中，您使用$('form')来选择表单来更改其操作，但之后您使用$(this)来尝试选择相同的表单。 我猜this回调函数里面的内容不是你想象的那样，而是你的表单以外的东西（可能是window对象）。

只是链接电话：

 $('form').attr('action', 'http://example.com').unbind('submit').submit();