這次帶給大家jquery中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;
}
//验证用户名是否被注册
$.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--函數返回 ajax回調
| |
| |
瀏覽器請求--php處理--瀏覽器接到結果
如果想要讓函數回傳在ajax回呼之後，可以改變上邊的模型，例如：
#複製程式碼 程式碼如下：
--執行函數調用--正則驗證--發起ajax ajax回調--函數返回
| |
| |
瀏覽器請求--php處理--瀏覽器接到結果
這可以透過修改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" />');
}
});登入後複製
我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
Ajax優缺點總結
#ajax html輕鬆實現檔案上傳有哪些步驟
以上是jquery中ajax執行順序調整的詳細內容。更多資訊請關注PHP中文網其他相關文章！
