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 相关文章推荐
jQuery 处理表单元素的代码
Feb 15 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
js实现微博发布小功能
Jan 12 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
Python机器学习之决策树和随机森林
Jul 15 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 Ajax中文乱码问题解决方法
2009/02/27 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
第六章 php目录与文件操作
2011/12/30 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
Python线程的两种编程方式
2015/04/14 Python
Python实现新浪博客备份的方法
2016/04/27 Python
通过Pandas读取大文件的实例
2018/06/07 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
C面试题
2015/10/08 面试题
一套中级Java程序员笔试题
2015/01/14 面试题
自荐信包含哪些内容
2013/10/30 职场文书
文体活动实施方案
2014/03/27 职场文书
孩子教育的心得体会
2014/09/01 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript