javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:首页 > WEB前端 > AJAX

jquery 中ajax执行的优先级

来源:IT技术网编辑:疯子发布于:2017-06-14人围观

本文给大家讲述的是个人再做用户注册的时候遇到的ajax执行优先级的问题,以及在网友们的帮助下,解决此问题的全过程,这里记录下来,分享给大家。

  今天在做用户注册时:发现了一个奇怪的问题,请看代码:

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('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代码:

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
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相关功能函数时,系统先返回函数,再进行请求,当收到请求结果,会通过调用回调函数的方式返回给用户。

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$('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是异步还是同步方式来实现!

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$('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" />');
}
 
});

  以上所述就是本文的全部内容了,希望大家能够喜欢。

上一篇:Java程序与Ajax使用实例代码

下一篇:没有了

与相关的文章
有时间的话来看看IT界的突发事件