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 相关文章推荐
豆瓣网的jquery代码实例
Jun 15 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
JS异常处理的一个想法(sofish)
Mar 14 Javascript
js跑步算法的实现代码
Dec 04 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 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
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
PHP云打印类完整示例
2016/10/15 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
Js动态创建div
2008/09/25 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
Python记录详细调用堆栈日志的方法
2015/05/05 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
python dumps和loads区别详解
2020/02/04 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
小学生安全保证书
2014/02/01 职场文书
软件售后服务方案
2014/05/29 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
先进员工事迹材料
2014/12/20 职场文书
亮剑观后感300字
2015/06/05 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
vue使用watch监听属性变化
2022/04/30 Vue.js
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS