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 相关文章推荐
关于__defineGetter__ 和__defineSetter__的说明
May 12 Javascript
Javascript 写的简单进度条控件
Jan 22 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
在node中如何使用 ES6
Apr 22 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 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 cookies中删除的一般赋值方法
2011/05/07 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
php实现encode64编码类实例
2015/03/24 PHP
PHP二维数组去重算法
2016/12/17 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
js闭包学习心得总结
2018/04/17 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
小程序云开发实战小结
2018/10/25 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
python 查找字符串是否存在实例详解
2017/01/20 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
Python设计密码强度校验程序
2020/07/30 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
蛋白质世界:Protein World
2017/11/23 全球购物
中科软笔试题和面试题
2014/10/07 面试题
十一酒店活动方案
2014/02/20 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
CSS3实现指纹特效代码
2022/03/17 HTML / CSS