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 中的类和闭包
Jan 08 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
PHP守护进程实例
Mar 06 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
js实现星星海特效的示例
Sep 28 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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版(4)
2006/10/09 PHP
PHP聊天室技术
2006/10/09 PHP
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
python3 反射的四种基本方法解析
2019/08/26 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
人力资源管理专业自荐书范文
2014/02/10 职场文书
迟到检讨书300字
2014/02/14 职场文书
前台文员职责范本
2014/03/07 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
2015年小学开学寄语
2015/02/27 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
婚宴领导致辞
2015/07/28 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
Python中Permission denied的解决方案
2021/04/02 Python