阻止表單數據在http請求后提交

Question

以下代碼阻止提交表單數據

$('#dataForm').submit(function (e) {
   e.preventDefault();
});

我的問題是，如果存在需要花費時間才能獲得響應的ajax調用，該如何實現。 因此表單不會等到請求獲得響應

$('#dataForm').submit(function (e) {
  ajaxCallAsPromise().then(function (data){
     if (data == true)
       {
         e.preventDefault(); //this will not work
       }
  });
  //any codes here works normally ..
});

我的目的是等待直到獲得請求響應，然后使用-

e.preventDefault();

Answer 1

您必須立即調用preventDefault()才能停止提交表單。 無法避免這種情況，因為AJAX調用是異步的，您需要等待它。

但是，您可以在AJAX調用完成后在form元素本身上調用submit() ，以顛覆jQuery事件處理程序並將表單發送到服務器，如下所示：

$('#dataForm').submit(function(e) {
  e.preventDefault(); // stop the submission
  var form = this;

  ajaxCallAsPromise().then(function(data) {
    if (!data) { // if data is verified, submit the form again
      form.submit();
    } else {
      // presumably you want to tell the user the data is invalid here...
    }
  });
});