Javascript用戶是否存在，從ajax返回值到最後？

Question

我有一個腳本告訴訪問者，如果用戶名已經存在或沒有，他可以繼續， 下面你看到我的代碼的一部分;

編輯：好的我看過什麼你們說了，修改了它，但我仍然沒有得到它的工作：S，我的老師不知道它要麼...

<script type="text/javascript"> 
jQuery(document).ready(function(){ 

    // Smart Wizard  
    jQuery('#wizard').smartWizard({onFinish: onFinishCallback, onLeaveStep: onNextStep}); 
    function onNextStep(){ 
     validateSteps(function (next) { return next; }); 
    } 
    function onFinishCallback(){ 
     alert('Finish Clicked'); 

    } 
    function UsernameExist(fullname, callback) 
    { 
        var data = 'user='+ fullname; 
        if(fullname) { 
            $.ajax({ 
                type: "POST", 
                url: "user_check.php", 
                data: data, 
       async: false, 
                beforeSend: function(html) { 
                    $("#msg_lastname").html(''); 
                }, 
                success: function(html){ 
                    $("#msg_lastname").show(); 
                   $("#msg_lastname").append(html); 
        if(html.search("red") != -1) 
        { 
         callback(false); 
        } 
        else 
        { 
         callback(true); 
        } 
                } 
            }); 
     } 
    } 
    function validateSteps(callback){ 
     var isStepValid = true; 
     // validate step 1 
     var firstname = $('#firstname').val(); 
     if(!firstname || (firstname.length < 3 || firstname.length > 10)) 
     { 
      $('#msg_firstname').html('<br/><font color="red">Enter a first name, between 3 and 10 letters.</font>').show(); 
      isStepValid = false; 
     } 
     else 
     { 
     $('#msg_firstname').html('').hide(); 
     } 
     var lastname = $('#lastname').val(); 
     if(!lastname || (lastname.length < 3 || lastname.length > 14)) 
     { 
      $('#msg_lastname').html('<br/><font color="red">Enter a last name, between 3 and 14 letters.</font>').show(); 
      isStepValid = false; 
     } 
     else 
     { 
     $('#msg_lastname').html('').hide(); 
     } 

     var gender = $('#gender').val(); 
     if(!gender || Number(gender) == -1) 
     { 
      $('#msg_gender').html('<br/><font color="red">Choose your gender!</font>').show(); 
      isStepValid = false; 
     } 
     else 
     { 
     $('#msg_gender').html('').hide(); 
     } 
     var age = $('#age').val(); 
     if(!age || Number(age) > 90 || Number(age) < 21) 
     { 
      $('#msg_age').html('<br/><font color="red">Enter a age between 21 and 90.</font>').show(); 
      isStepValid = false; 
     } 
     else 
     { 
     $('#msg_age').html('').hide(); 
     } 
     var pin = $('#pin').val(); 
     if(!pin || pin.length > 10 || pin.length < 4) 
     { 
      $('#msg_pin').html('<br/><font color="red">Enter a PIN between 4 and 10 numbers.</font>').show(); 
      isStepValid = false; 
     } 
     else 
     { 
     $('#msg_pin').html('').hide(); 
     } 
     if (isStepValid) { 
      UsernameExist(firstname + ' ' + lastname, function (exists) { 
       callback(exists); 
      }); 
     } else { 
      callback(false); 
     } 

    } 
    jQuery('select, input:checkbox').uniform(); 

}); 
</script> 

現在問題是，當我運行這個腳本時，它返回undefined，我猜是因爲UsernameExist做得不夠快，而且看起來返回的UsernameExist並沒有因爲某種原因而等待它...

Answer 1

您之前返回UsernameExists它已經運行。

相反，調用UsernameExists這樣的：

if (isStepValid) { 
    UsernameExist(firstname + ' ' + lastname, function (exists) { 
     return exists; 
    }); 
} else { 
    return false; 
} 

這工作，因爲UsernameExists需要一個回調函數，併成功通過任何true或false到callback()。

Answer 2

嘗試這樣：

// Smart Wizard  
$('#wizard').smartWizard({onFinish: onFinishCallback, onLeaveStep: onNextStep}); 

function onNextStep() { 
    var isValid = validateSteps(); 
    alert(isValid); 
} 

function onFinishCallback(){ 
    alert('Finish Clicked'); 
} 

function UsernameExist(fullname) 
{ 
    var data = 'user='+ fullname; 
    var userAlreadyExists = null; 

    if(fullname) { 
     $.ajax({ 
      type: "POST", 
      url: "user_check.php", 
      data: data, 
      async: false, 
      beforeSend: function(html) { 
       $("#msg_lastname").html(''); 
      }, 
      success: function(html){ 
       $("#msg_lastname").show(); 
       $("#msg_lastname").append(html); 

       if(html.search("red") != -1) 
       { 
        userAlreadyExists = false; 
       } 
       else 
       { 
        userAlreadyExists = true; 
       } 
      } 
     }); 
    } 

    return userAlreadyExists; 
} 

function validateSteps(){ 
    ... 
    if (isStepValid) { 
     return UsernameExist(firstname + ' ' + lastname); 
    } else { 
     return false; 
    } 
} 

Answer 3

你只需要設置async選項爲false

function UsernameExist(fullname, callback) { 
    var data = 'user=' + fullname; 
    if (fullname) { 
     $.ajax({ 
      type: "POST", 
      url: "user_check.php", 
      data: data, 
      async: false, 
      beforeSend: function (html) { 
       $("#msg_lastname").html(''); 
      }, 
      success: function (html) { 
      //your code after success 
      } 
     }); 
    } 
} 

從jQuery文檔jQuery.ajax

If you need synchronous requests, set this option to false 

，所以你需要執行你的Ajax打電話並等到它完全結束根據結果​​執行你想要的內容

Answer 4

也許你應該在jQuery加載完成後調用UsernameExist（fullname，callback）。

試試這個：

getScript('http://code.jquery.com/jquery-1.9.1.min.js', function() {UsernameExist(fullname, callback)}); 


function getScript(url, callback) { 
var script; 
script = document.createElement("script"); 
script.setAttribute('language', 'javascript'); 
script.setAttribute('type', 'text/javascript'); 
script.setAttribute('src', url); 
var done = false; 
vObj = script.onload; 
script.onload = script.onreadystatechange = function() { 
    if (!done && (!this.readyState || 
      this.readyState == "loaded" || this.readyState == "complete")) { 
     done = true; 
     if (typeof callback === 'function') 
      callback(this.ownerDocument.attributes); 
    } 
}; 
var head = document.getElementsByTagName('head')[0]; 
head.appendChild(script);}