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 相关文章推荐
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
JavaScript实现省市联动效果
Nov 22 Javascript
js+canvas实现五子棋小游戏
Aug 02 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配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
简单实现python收发邮件功能
2018/01/05 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
市场营销毕业生自荐信
2013/11/23 职场文书
员工培训心得体会
2013/12/30 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
2016保送生自荐信范文
2016/01/29 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技