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

Question

因此，只有在使用ajax从数据库验证条件时才会提交表单。如果条件为真，我正在使用preventDefault()方法，即如果用户不是常驻，则ajax successs function中的变量设置为true并且preventDefault()被调用，但是，执行此操作时，表格总是提交。即使异步设置为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();

  });