今天在做使用者註冊時:發現了一個奇怪的問題,請看程式碼:
$('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的同步和非同步的問題,非同步的話你可以想像一下兩條線路
以上所述就是本文的全部內容了,希望大家能夠喜歡。