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 相关文章推荐
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
vue选项卡切换的实现案例
Apr 11 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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
深入理解Django中内置的用户认证
2017/10/06 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
快速查找Python安装路径方法
2020/02/06 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
教师业务学习制度
2014/01/25 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
父亲去世追悼词
2015/06/23 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS