2012-07-16 290 views
0

我有一個ajax註冊表單。用戶可以在輸入字段中輸入所需的用戶名,然後立即點擊註冊按鈕,同時檢查用戶名是否可用的ajax請求未完成。對於這種情況,我希望只有在檢查用戶名的ajax請求完成時纔開始執行註冊按鈕的操作,否則請等待它完成,然後繼續。這個怎麼做?如何等待異步請求完成

我希望用戶名驗證功能保持異步,因爲每次用戶在輸入字段上執行一次鍵盤操作時都會執行該操作。

一種方法是在單擊註冊按鈕時進入setTimeout()循環,並保持該狀態直到標誌良好。另一種方法是在異步請求未完成時調用同步用戶名檢查請求。有更好的方法嗎?

如果您在不使用jQuery的情況下給出答案,那將會很好。

+0

這是你可以在jQuery中輕鬆完成的事情。這是你可以接受的嗎?你會使用這個成功回調。 – Undefined 2012-07-16 14:05:42

+0

而不是jQuery我更喜歡做什麼的概念性解釋。我不知道jQuery。 – gom 2012-07-16 14:18:45

+0

呃...所以你需要註冊按鈕被禁用,直到用戶名被驗證,對吧? – raina77ow 2012-07-16 14:20:55

回答

3

不要爲此使用setTimeout。

只需使用的jquery's ajax回調功能:執行你在success回調或新done助手代碼「之後」:

$.ajax({ 
    url: "test.html" 
}).done(function() { 
    // do things after the answer has been received 
}); 

編輯:

沒有jQuery和不立即觸發:

var httpRequest = new XMLHttpRequest(); 
var requestDoneAndOK = false; 
httpRequest.onreadystatechange = function() { 
    if (httpRequest.readyState === 4) { 
     if (httpRequest.status === 200) { 
       requestDoneAndOK = true; 
     }    
    } 
}; 
httpRequest.open('GET', url); 
httpRequest.send(); 

而當「註冊「按鈕被點擊,你只需要檢查requestDoneAndOK,如果它是真的調用你的其他功能。

編輯2:

碼被儘快2個條件實現執行:接收答案和註冊按鈕點擊。

var registerClicked = false; 
var ajaxAnswerReceived = false; 
function check() { 
    if (registerClicked && ajaxAnswerReceived) { 
     // do the thing ! 
    } 
} 
var httpRequest = new XMLHttpRequest(); 
var requestDoneAndOK = false; 
httpRequest.onreadystatechange = function() { 
    if (httpRequest.readyState === 4) { 
     if (httpRequest.status === 200) { 
       ajaxAnswerReceived = true; 
       check(); 
     }    
    } 
}; 
httpRequest.open('GET', url); 
httpRequest.send(); 
document.getElementById('registerButton').onclick = function(){ 
    registerClicked = true; 
    check(); 
}; 
+1

你的回答是正確的,但user1444680表示他更喜歡沒有jQuery的解決方案。 – koenpeters 2012-07-16 14:12:37

+0

我不知道jQuery,但我能理解的是,當ajax請求完成時,我的函數將被自動觸發。我不想那樣。我希望他們在點擊「註冊」按鈕時觸發。點擊後,檢查點擊之前完成的ajax請求是否完成。 – gom 2012-07-16 14:13:16

+0

@koenp OOps。我讀過太快的問題的最後一行...我明白OP特別*想要* jquery ... – 2012-07-16 14:14:20

0

您需要使用回調和商店有效標誌布爾值,你則需要檢查用戶提交註冊頁面之前。這是一個jQuery實現,但並不難將其轉換爲常規js。方法定義如下:

var goodUsername = false; 

// keyup handler, pseudo code 
$('#username').keyup(function(event) { 
    // perform the username validation with an ajax call: 
    $.ajax({ 
     url: "validateUsername.php" 
    }).done(function(data) { 
     // set the goodUsername if its good or not 
     if (data.usernameIsGood) 
      goodUserName = true; 
    }); 
}); 

// submit the registration form only if the username has been checked and is good 
$('#registrationFormButton').click(function(event){ 
    if (goodUsername) 
     return true; // allows the browser to submit the form 
    else 
     return false; 
}); 
+0

「if(goodUsername) return true; //允許瀏覽器提交表格 else 返回false;」 我不想返回錯誤,我希望它等到它是真的。 – gom 2012-07-16 14:20:42

+0

該特定功能允許提交表單。當它返回true時,click事件傳遞給瀏覽器,瀏覽器提交表單。如果您在那裏返回false(因爲用戶名不好),那麼瀏覽器從不會看到點擊事件,也不會提交表單。因此異步等待。 – 2012-07-16 14:23:26

+0

哦,我不知道jQuery,這就是我誤解的原因。 – gom 2012-07-16 14:26:51