jquery ajax同步异步的执行最终解决方案


Posted in Javascript onApril 26, 2013

大家先看一段简单的jquery ajax 返回值的js
代码

function getReturnAjax{ 
$.ajax({ 
type:"POST", 
http://www.cnblogs.com/wlmemail/admin/%22ajax/userexist.aspx", 
data:"username="+vusername.value, 
success:function(msg){ 
if(msg=="ok"){ 
showtipex(vusername.id,"<img src='images/ok.gif'/><b><font color='#ffff00'>该用户名可以使用</font></b>",false) 
return true; 
} 
else 
{ 
showtipex(vusername.id,"<img src='images/cancel.gif'/><b><font color='#ffff00'>该用户已被注册</font></b>",false); 
vusername.className="bigwrong"; 
return false; 
} 
} 
}); 
}

但是我们调用这个getReturnAjax()发现始终取得的都是false,那就是说return true,return false根本没有起作用,在火狐下用firebug调试也证明,代码根本不会执行到return 部分。

我们试想在函数里先定义一个变量,然后在ajax里赋值,最后在函数的末尾返回这个变量,会不会有效果呢?我们把代码修改如下:
代码

function getAjaxReturn() 
{ 
var bol=false; 
$.ajax({ 
type:"POST", 
http://www.cnblogs.com/wlmemail/admin/%22ajax/userexist.aspx", 
data:"username="+vusername.value, 
success:function(msg){ 
if(msg=="ok"){ 
showtipex(vusername.id,"<img src='images/ok.gif'/><b><font color='#ffff00'>该用户名可以使用</font></b>",false) 
// return true; 
bol=true; 
} 
else 
{ 
showtipex(vusername.id,"<img src='images/cancel.gif'/><b><font color='#ffff00'>该用户已被注册</font></b>",false); 
vusername.className="bigwrong"; 
//return false; 
} 
} 
}); 
return bol; 
}

结果仍然不起作用。最后解决方案有2,如下
1、添加async:false.即修改为同步了,什么意思?(按同事解释就是,这是等这个ajax有了返回值后才会执行下面的js。一语道破天机,怪不得以前很多ajax调用里面的赋值都不起作用)。这样等ajax给bol赋值完毕后,才执行下面的js部分。而刚刚异步的话,还没有来得及赋值,就已经return了。
代码
function getAjaxReturn() 
{ 
var bol=false; 
$.ajax({ 
type:"POST", 
async:false, 
http://www.cnblogs.com/wlmemail/admin/%22ajax/userexist.aspx", 
data:"username="+vusername.value, 
success:function(msg){ 
if(msg=="ok"){ 
showtipex(vusername.id,"<img src='images/ok.gif'/><b><font color='#ffff00'>该用户名可以使用</font></b>",false) 
// return true; 
bol=true; 
} 
else 
{ 
showtipex(vusername.id,"<img src='images/cancel.gif'/><b><font color='#ffff00'>该用户已被注册</font></b>",false); 
vusername.className="bigwrong"; 
//return false; 
} 
} 
}); 
return bol; 
}

2、 通过传入一个函数解决这个问题。
代码
function getAjaxReturn(success_function,fail_function) 
{ 
var bol=false; 
$.ajax({ 
type:"POST", 
http://www.cnblogs.com/wlmemail/admin/%22ajax/userexist.aspx", 
data:"username="+vusername.value, 
success:function(msg){ 
if(msg=="ok"){ 
showtipex(vusername.id,"<img src='images/ok.gif'/><b><font color='#ffff00'>该用户名可以使用</font></b>",false) 
success_function(msg); 
} 
else 
{ 
showtipex(vusername.id,"<img src='images/cancel.gif'/><b><font color='#ffff00'>该用户已被注册</font></b>",false); 
vusername.className="bigwrong"; 
fail_function(msg); 
//return false; 
} 
} 
}); 
function success_function(info) 
{ 
//do what you want do 
alert(info); 
} 
funciont fail_function(info) 
{ 
//do what you want do 
alert(info); 
}
Javascript 相关文章推荐
js下用层来实现select的title提示属性
Feb 23 Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
javascript数组去重小结
Mar 07 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 #Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 #Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 #Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 #Javascript
基于jquery中children()与find()的区别介绍
Apr 26 #Javascript
基于jQuery选择器的整理集合
Apr 26 #Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 #Javascript
You might like
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
教你php如何实现验证码
2016/01/20 PHP
php生成图片验证码的方法
2016/04/15 PHP
php 多文件上传的实现实例
2016/10/23 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
vue mounted组件的使用
2018/06/18 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
Python函数装饰器实现方法详解
2018/12/22 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
美国智能家居专家:tink
2019/06/04 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
党员创先争优承诺书
2014/03/26 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
大学军训决心书
2015/02/05 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
PHP中->和=>的意思
2021/03/31 PHP
JavaScript获取URL参数的方法分享
2022/04/07 Javascript