这次给大家带来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('5-12个字符，必须以字母开头，只能输入数字，字母和下划线'); return false; } //验证用户名是否被注册 $.post('register.php?act=checkUser',{username:$(this).val()},function(data){ if(data.status == 'error') { $('input[name="username"]').siblings('.desc').html(''+data.info+''); return false; } },'json'); //成功 alert('成功'); //$(this).siblings('.desc').html('
'); });
登录后复制
按道理说，上面的格式是
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('5-12个字符，必须以字母开头，只能输入数字，字母和下划线'); return false; } //验证用户名是否被注册 $.post('register.php?act=checkUser',{username:$(this).val()},function(data){ if(data.status == 'error') { $('input[name="username"]').siblings('.desc').html(''+data.info+''); return false; } }, function(data){ //对于post函数，第三个参数为回调函数 alert('成功'); } ,'json'); //成功 //alert('成功'); //$(this).siblings('.desc').html(''); });
登录后复制
照这样修改一下，试试，体会一下不同之处。
不同的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('5-12个字符，必须以字母开头，只能输入数字，字母和下划线'); 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(''+data.info+''); //return false; } else { ajaxCheckUser = true; } },'json'); if(ajaxCheckUser) { //成功 alert('成功'); //$(this).siblings('.desc').html(''); } });
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Ajax优缺点总结
ajax+html轻松实现文件上传有哪些步骤
以上就是jquery中ajax执行顺序调整的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2768408.html
