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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
JavaScript基本数据类型及值类型和引用类型
Aug 25 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
js实现3D旋转效果
Aug 18 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
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排序算法(冒泡排序,快速排序)
2012/10/09 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
如何更好的编写js async函数
2018/05/13 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
Vue指令指令大全
2019/02/09 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
python3爬取淘宝信息代码分析
2018/02/10 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
Python解析多帧dicom数据详解
2020/01/13 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
经济类毕业生求职信
2014/06/26 职场文书
商铺门前三包责任书
2014/07/25 职场文书
户籍证明模板
2014/09/28 职场文书
通知格式
2015/04/27 职场文书
公司周年庆典致辞
2015/07/30 职场文书
python批量创建变量并赋值操作
2021/06/03 Python