jquery ajax 同步异步的执行示例代码


Posted in Javascript onJune 23, 2010

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

function getReturnAjax{ 
$.ajax({ 
type:"POST", 
https://3water.com/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", 
https://3water.com/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, 
https://3water.com/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", 
https://3water.com/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函数调用常用方法详解
Dec 03 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
jquery 使用简明教程
Mar 05 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
jquery tab插件制作实现代码
Jun 22 #Javascript
jquery多浏览器捕捉回车事件代码
Jun 22 #Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 #Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 #Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 #Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 #Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 #Javascript
You might like
十幅图告诉你什么是PHP引用
2015/02/22 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
utf8的编码算法 转载
2006/12/27 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
实例讲解Python爬取网页数据
2018/07/08 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
Python创建或生成列表的操作方法
2019/06/19 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
体育教师工作总结的自我评价
2013/10/10 职场文书
食品营养与检测应届生求职信
2013/11/08 职场文书
安全生产先进个人材料
2014/02/06 职场文书
公司节能减排倡议书
2014/05/14 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
论文答辩开场白大全
2015/05/27 职场文书
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL