javascript - 如何让表单在提交之前等待 ajax 完成？

Question

所以有一个表单，我只想在使用 ajax 从数据库验证条件时提交。如果条件为真，我正在使用preventDefault()方法，即如果用户不是居民，则变量设置为真ajax successs function并被preventDefault()调用，但是，这样做时，表单总是提交。即使 async 设置为 false，它也不会等待 ajax 完成。这是代码。

  $('#button').click(function(e) {    
    if ($('#ca_resident').prop('checked') == true) { 
      amount=$('#user-amount').val().replace(/[,]/g,"");
      project_name=$('#project_name').val();
      var not_resident = false;
       $.ajax({
        url: '/main/verify_residence/',
        type: 'POST',
        aysnc: false,
        data: {
          value: amount,
          name: project_name
        },
        success: function(data){
          $("#verify_residence").html(data);
          not_resident = true;
        },
        dataType: 'html'
      }); 
    }
    if(not_resident){
      e.preventDefault();
    }
  });

Answer 1

那是行不通的。成功将在以下时间触发：

if(not_resident){
      e.preventDefault();
    }

因为它是异步的。您需要始终取消按钮单击，然后在成功后提交表单：

$('#button').click(function(e) {    
   var $form = $(this).closest('form');   

   if ($('#ca_resident').prop('checked') == true) { 
      amount=$('#user-amount').val().replace(/[,]/g,"");
      project_name=$('#project_name').val();
       $.ajax({
        url: '/main/verify_residence/',
        type: 'POST',
        aysnc: false,
        data: {
          value: amount,
          name: project_name
        },
        success: function(data){
          $("#verify_residence").html(data);
          $form.submit();
        },
        dataType: 'html'
      }); 
    }


    e.preventDefault();

  });