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 相关文章推荐
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
Vue表单实例代码
Sep 05 Javascript
canvas实现弧形可拖动进度条效果
May 11 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
详解VueJS应用中管理用户权限
Feb 02 Javascript
Vue组件库发布到npm详解
Feb 17 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快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
php 修改密码实现代码
2017/05/24 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
python进阶教程之模块(module)介绍
2014/08/30 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
flask-restful使用总结
2018/12/04 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
Python实现弹球小游戏
2020/08/01 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
外贸主管求职简历的自我评价
2013/10/23 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
小学课外阅读总结
2014/07/09 职场文书
高一军训决心书
2015/02/05 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
董事长开业致辞
2015/07/29 职场文书
大学班干部竞选稿
2015/11/20 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
python解析json数据
2022/04/29 Python