如何在ajax成功函數外保存var值？

Question

我想做一些表單驗證功能。這裏是我的：

<script> 
$(document).ready(function() { 

var myObj = {}; 

$('#username').keyup(function() { 

    id = $(this).attr('id'); 
    validateUsername(id);  

}); 

function validateUsername(id){ 

var username = $("#"+id).val(); 

    $.ajax({ 
     url : "validate.php", 
     dataType: 'json', 
     data: 'action=usr_id&id=' + username, 
     type: "POST", 
     success: function(data) { 

      if (data.ok == true) { 

       $(myObj).data("username","ok"); 

      } else { 


       $(myObj).data("username","no"); 

      } 

     } 
    }); 


} // end validateusername function 


$('#submit').click(function(){ 

    if (myObj.username == "ok") { 

     alert("Username OK"); 

    } else { 

     alert("Username BAD"); 

    } 


}); 




}); // end doc ready 

所以你可以看到，當在文本框中按下一個鍵時，它檢查它是否有效。 「data.ok」回來正確。問題是基於響應，我定義$（myObj）.username。出於某種原因，我無法獲得此值在validateusername函數外工作。當點擊提交按鈕時，它不知道$（myObj）.username的值是什麼。

我需要使用這樣的事情，因爲在頁面上多個表單域來驗證，我可以這樣做：

if (myObj.username && myObj.password && myObj.email == "ok") 

...提交表單前檢查我所有的表單字段。

我知道我必須錯過一些基本的東西....任何想法？

編輯：解決

我所要做的就是改變VAR MyObj中= {};至myObj = {};和它的魅力。我想我一直在盯着這個屏幕waaaaay太久了！

Answer 1

您沒有訪問正確存儲的數據。進入用戶名值是這樣的：

$(myObj).data("username") 

資源：

看看jQuery的.data() docs。

Very simple jsFiddle顯示如何使用jQuery的.data（）方法正確設置和檢索數據。

Answer 2

我會將承諾存儲在該全局變量中，然後在提交按鈕單擊中將事件綁定到完成事件。

$(document).ready(function() { 

var myObj = false; 

$('#username').keyup(function() { 

    id = $(this).attr('id'); 
    validateUsername(id);  

}); 

function validateUsername(id){ 

    var username = $("#"+id).val(); 

    myObj = $.ajax({ 
     url : "validate.php", 
     dataType: 'json', 
     data: 'action=usr_id&id=' + username, 
     type: "POST", 
     success: function(data) { 
      $('#username').removeClass('valid invalid'); 
      if (data.ok == true) { 
      $('#username').addClass('valid'); 
      } 
      else { 
      $('#username').addClass('invalid'); 
      } 
     } 
    }); 


} // end validateusername function 


$('#submit').click(function(){ 

    // if myObj is still equal to false, the username has 
    // not changed yet, therefore the ajax request hasn't 
    // been made 
    if (!myObj) { 
     alert("Username BAD"); 
    } 
    // since a deferred object exists, add a callback to done 
    else { 
     myObj.done(function(data){ 
      if (data.ok == true) { 
       alert("Username BAD"); 
      } 
      else { 
       alert("Username OK"); 
      }    
     }); 
    } 

}); 




}); // end doc ready 

雖然爲了防止多個ajax請求同時處於活動狀態，但您可能希望爲keyup事件添加一些限制。