jquery ajax 同步异步的执行示例代码


Posted in Javascript onJune 23, 2010

大家先看一段简单的jquery ajax 返回值的js
代码

function getReturnAjax{ 
$.ajax({ 
type:"POST", 
https://3water.com/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", 
https://3water.com/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, 
https://3water.com/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", 
https://3water.com/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 白痴级入门教程
Nov 11 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
jquery tab插件制作实现代码
Jun 22 #Javascript
jquery多浏览器捕捉回车事件代码
Jun 22 #Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 #Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 #Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 #Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 #Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 #Javascript
You might like
Destoon实现多表查询示例
2014/08/21 PHP
php cli配置文件问题分析
2015/10/15 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
javascript 特殊字符串
2009/02/25 Javascript
flexigrid 参数说明
2010/11/23 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
JS重学系列之聊聊new操作符
2019/03/04 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
python对DICOM图像的读取方法详解
2017/07/17 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
Python常用数据分析模块原理解析
2020/07/20 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
股东合作协议书范本
2014/04/14 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
安全负责人任命书
2014/06/06 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
单位工作证明
2014/10/07 职场文书
学校捐款活动总结
2015/05/09 职场文书
大学生支教感言
2015/08/01 职场文书
python 多态 协议 鸭子类型详解
2021/11/27 Python
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
Django框架模板用法详解
2022/06/10 Python