帶有ajax時間問題的jquery驗證程序

Question

在以下代碼中，ajax調用可正常工作，isTaken已正確更新。但return isTaken在ajax調用完成之前執行，因此它始終返回初始false設置。 async = true已棄用，那麼如何在返回正確更新的isTaken響應之前等待ajax調用完成？

$.validator.addMethod("checkExists", 
     function (value, element) { 

      var email = $("#email").val(); 
      var data = {email: email}; 

      var isTaken = false; 
      $.ajax({ 
       type: "POST", 
       url: "http://localhost/CFBserver/check_email.php", 
       data: data, 
       success: function (response) { 
        isTaken = (response == 1) ? true : false; 
       } 
      }); 
      return isTaken; 
     }, 
     "This username is already taken! Try another." 
     ); 

Answer 1

使用jQuery.when()用於此目的，等待通過AJAX調用完成回調函數之前完成。

$.validator.addMethod("checkExists", 
    function (value, element) { 

     var email = $("#email").val(); 
     var data = {email: email}; 

     $.when(
      return $.ajax({ 
       type: "POST", 
       url: "http://localhost/CFBserver/check_email.php", 
       data: data 
      }); 
     ).done(function(response) { 
      return response == 1; // returns true is response is 1, false otherwise 
     }); 
    }, 
    "This username is already taken! Try another." 
    ); 

我還通過根據if語句返回布爾值來簡化代碼。

我會從你的函數中獲得這個AJAX調用，並將它作爲一個單獨的 - 這樣代碼將看起來更好，並可以從另一個地方進行調用。

$.when(checkMail).done(function(response) { 
    return response == 1; // returns true is response is 1, false otherwise 
}); 

// Outside of validator function... 

function checkMail() { 
    return $.ajax({ 
     type: "POST", 
     url: "http://localhost/CFBserver/check_email.php", 
     data: data 
    }); 
} 

此外，你也想處理您的AJAX調用錯誤，請使用then代替done，並提供兩種功能爲回調：一個成功，一個用於失敗：

$.when(checkMail).then(function(response) { 
    // Function gets called as 'success' from AJAX 
    return response == 1; 
}, function (errorResponse) { 
    // Function gets called as 'error' from AJAX 
    // return false; // or 
    // return "Error when checking email: " + errorResponse; 
});