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 相关文章推荐
动态调用CSS文件的JS代码
Jul 29 Javascript
jquery插件之easing使用
Aug 19 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 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 取得瑞年与平年的天数的代码
2009/08/10 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
jQuery插件开发基础简单介绍
2013/01/07 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
从零学Python之入门(三)序列
2014/05/25 Python
Django中Forms的使用代码解析
2018/02/10 Python
Python 切分数组实例解析
2019/11/07 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
PHP面试题大全
2015/10/16 面试题
开展批评与自我批评发言材料
2014/05/15 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
史上最牛辞职信
2015/05/13 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
神秘岛读书笔记
2015/07/01 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
Python os和os.path模块详情
2022/04/02 Python