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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
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 flock 文件锁详细介绍
2012/12/29 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
javascript 函数调用规则
2009/08/26 Javascript
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
python中global与nonlocal比较
2014/11/21 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
详解Python爬虫的基本写法
2016/01/08 Python
python如何查看微信消息撤回
2018/11/27 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
python实现连连看游戏
2020/02/14 Python
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
写好求职信第一句话的技巧
2013/10/26 职场文书
商场中秋节广播稿
2014/01/17 职场文书
《口技》教学反思
2014/02/21 职场文书
校庆标语集锦
2014/06/25 职场文书
土地租赁意向书
2014/07/30 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
赔偿协议书
2015/01/27 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript