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 相关文章推荐
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
jquery tools 系列 scrollable学习
Sep 06 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
Angular学习教程之RouterLink花式跳转
May 03 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 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
将数组写入txt文件 var_export
2009/04/21 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
js实现简单计算器
2015/11/22 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
python基础教程之字典操作详解
2014/03/25 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
python中np是做什么的
2020/07/21 Python
拾金不昧表扬信
2015/01/16 职场文书
高校教师个人总结
2015/02/10 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
银行求职信怎么写
2019/06/20 职场文书
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL