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

Question

是否可以停止表单提交，然后从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'); 
      } 
     }); 
    }); 
}); 

编辑：

帖子＃1签出了下面的代码：

• Resume form submission after $.ajax call
• How to reenable 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 to 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

在一行中使用$('form')选择的形式来改变其行为，但你使用$(this)要尽量选择相同的形式。我猜想回调函数内部的this与您期望的不同，并且不是您的表单（可能是window对象）。

刚刚链中的呼叫：

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

Answer 3

这是重新选择整个代码的所有形式的标签没有很好的做法，如果你有在页面上多形式？ 另外你最好还是用jQuery使用.on()和.off()。

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