javascript - 防止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 调用完成后对表单元素本身调用 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...
    }
  });
});