如何讓表單在提交前等待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(); 

    });