今天在做用戶注冊時：發現了一個奇怪的問題，請看代碼：
$('input[name="username"]').blur(function(){ //驗證格式 var pattern = /^[a-z][/w]{4,11}$/i; if(!pattern.test($(this).val())) { $(this).siblings('.desc').html('<font style="color:red;">5-12個字符，必須以字母開頭，只能輸入數字，字母和下劃線</font>'); return false; } //驗證用戶名是否被注冊 $.post('register.php?act=checkUser',{username:$(this).val()},function(data){ if(data.status == 'error') { $('input[name="username"]').siblings('.desc').html('<font style="color:red;">'+data.info+'</font>'); return false; } },'json'); //成功 alert('成功'); //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />'); });按道理說，上面的格式是
1、驗證用戶名是否符合格式
2、格式正確再AJAX判斷用戶名是否被占用，
3、都成功則顯示正確的圖標，
但是問題是當我驗證用戶格式成功了之后，它就直接執行了，alert('成功')，然后再執行ajax，這是為什么呢？是ajax執行的時間問題嗎？還是別的？？？
這是PHP代碼：
if($_GET['act'] == 'checkUser') { if($_SERVER['HTTP_X_REQUESTED_WITH'] !== 'XMLHttpRequest') exit('非法操作?。。?); $sql = "SELECT id FROM {$sys_vars['db_pre']}user WHERE username='{$_POST['username']}'"; $result = mysql_query($sql); $data = mysql_fetch_assoc($result); if ($data) { exit(json_encode(array('status'=>'error','info'=>'該用戶名已被注冊?。?！'))); }else{ exit(json_encode(array('status'=>'success'))); }}分析如下
ajax是異步操作，當執行ajax相關功能函數時，系統先返回函數，再進行請求，當收到請求結果，會通過調用回調函數的方式返回給用戶。
$('input[name="username"]').blur(function(){ //驗證格式 var pattern = /^[a-z][/w]{4,11}$/i; if(!pattern.test($(this).val())) { $(this).siblings('.desc').html('<font style="color:red;">5-12個字符，必須以字母開頭，只能輸入數字，字母和下劃線</font>'); return false; } //驗證用戶名是否被注冊 $.post('register.php?act=checkUser',{username:$(this).val()},function(data){ if(data.status == 'error') { $('input[name="username"]').siblings('.desc').html('<font style="color:red;">'+data.info+'</font>'); return false; } }, function(data){ //對于post函數，第三個參數為回調函數 alert('成功'); } ,'json'); //成功 //alert('成功'); //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />'); });照這樣修改一下，試試，體會一下不同之處。
不同的ajax函數 其回調函數的使用方法略有不同，可參考w3school的教程或jQuery官網。
這個其實是js的同步和異步的問題，異步的話你可以想象一下兩條線路
如果想讓函數返回在ajax回調之后，可以改變上邊的模型，例如：
這個可以通過修改jquery的發起ajax是異步還是同步方式來實現！
$('input[name="username"]').blur(function(){ //驗證格式 var pattern = /^[a-z][/w]{4,11}$/i; if(!pattern.test($(this).val())) { $(this).siblings('.desc').html('<font style="color:red;">5-12個字符，必須以字母開頭，只能輸入數字，字母和下劃線</font>'); return false; } //驗證用戶名是否被注冊 var ajaxCheckUser = false; $.ajax({ type: "POST", url: "register.php?act=checkUser", data: {username:$(this).val()}, // 注意這里 async:false success: function(data){ if(data.status == 'error') { $('input[name="username"]').siblings('.desc').html('<font style="color:red;">'+data.info+'</font>'); //return false; } else { ajaxCheckUser = true; } },'json'); if(ajaxCheckUser) { //成功 alert('成功'); //$(this).siblings('.desc').html('<img src="./public/images/ok.gif" />'); } });以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
