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之ESC(第二类混淆)
May 06 Javascript
js操作select控件的几种方法
Jun 02 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
webpack4简单入门实例
Sep 06 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 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
WHOIS类的修改版
2006/10/09 PHP
php修改时间格式的代码
2011/05/29 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
用js写的一个路由(简单实例)
2016/09/24 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
javascript实现固定侧边栏
2021/02/09 Javascript
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
Django实现学员管理系统
2019/02/26 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
大学生两会精神学习心得体会
2014/03/10 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
治庸问责心得体会
2014/09/12 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS