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 使用手册(五)
Sep 23 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
小程序云开发之用户注册登录
May 18 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
在vue中实现echarts随窗体变化
Jul 27 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
mysql中存储过程、函数的一些问题
2007/02/14 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
机器学习实战之knn算法pandas
2019/06/22 Python
通过实例解析Python调用json模块
2019/12/11 Python
Python中求对数方法总结
2020/03/10 Python
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
举例说明类变量和实例变量的区别
2016/06/30 面试题
教师自我反思材料
2014/02/14 职场文书
2014年施工员工作总结
2014/11/18 职场文书
暂停营业通知
2015/04/25 职场文书
家装电话营销开场白
2015/05/29 职场文书
15个值得收藏的JavaScript函数
2021/09/15 Javascript