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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
JavaScript静态的动态
Sep 18 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
jquery实现submit提交表单
Feb 03 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
详解javascript的变量与标识符
Jan 04 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 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
删除无限级目录与文件代码共享
2006/07/12 PHP
PHP4和PHP5共存于一系统
2006/11/17 PHP
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
php里array_work用法实例分析
2015/07/13 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
Prototype使用指南之selector.js说明
2008/10/26 Javascript
JavaScript 事件的一些重要说明
2009/10/25 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
Python实现线程状态监测简单示例
2018/03/28 Python
Django Rest framework频率原理与限制
2019/07/26 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
婚庆答谢词
2015/01/04 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
新手初学Java List 接口
2021/07/07 Java/Android
nginx rewrite功能使用场景分析
2022/05/30 Servers
python 使用pandas读取csv文件的方法
2022/12/24 Python