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 相关文章推荐
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 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实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
用于table内容排序
2006/07/21 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
JS打印组合功能
2016/08/04 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
python支持断点续传的多线程下载示例
2014/01/16 Python
盘点提高 Python 代码效率的方法
2014/07/03 Python
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
python如何实现递归转非递归
2021/02/25 Python
HTTP状态码详解
2021/03/18 杂记
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
测试工程师职业规划书
2014/02/06 职场文书
档案室主任岗位职责
2014/02/12 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
拔河比赛口号
2014/06/10 职场文书
土地租赁意向书
2014/07/30 职场文书
农村党员对照检查材料
2014/09/24 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python