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 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
js trim函数 去空格函数与正则集锦
Nov 20 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 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
国外十大最流行的PHP框架排名
2013/07/04 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
文本加密解密
2006/06/23 Javascript
javascript知识点收藏
2007/02/22 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
简单介绍react redux的中间件的使用
2018/04/06 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
Python 多核并行计算的示例代码
2017/11/07 Python
对numpy中轴与维度的理解
2018/04/18 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
python制作抖音代码舞
2019/04/07 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
十佳大学生事迹材料
2014/01/29 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
疾病捐款倡议书
2014/05/13 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
商铺消防安全责任书
2014/07/29 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
工程主管竞聘书
2015/09/15 职场文书
解除租赁合同协议书
2016/03/21 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书