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 页面执行时间计算代码
Mar 04 Javascript
jQuery 注意事项 与原因分析
Apr 24 Javascript
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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
laravel如何开启跨域功能示例详解
2017/08/31 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
BootStrap的双日历时间控件使用
2017/07/25 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
python发送邮件接收邮件示例分享
2014/01/21 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
python的debug实用工具 pdb详解
2019/07/12 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
质量负责人任命书
2014/06/06 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书