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 相关文章推荐
JavaScript 语言的递归编程
May 18 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
vue调用语音播放的方法
Sep 27 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/05 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
javascript判断office版本示例
2014/04/11 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
微信小程序webSocket的使用方法
2020/02/20 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
python事件驱动event实现详解
2018/11/21 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
时尚圣经:The Fashion Bible
2019/03/03 全球购物
给物业的表扬信
2014/01/21 职场文书
新品发布会策划方案
2014/06/08 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
初中毕业生感言
2015/07/31 职场文书
我爱我班主题班会
2015/08/13 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
修改并编译golang源码的操作步骤
2021/07/25 Golang