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 相关文章推荐
PHP abstract与interface之间的区别
Nov 11 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
详解Vue组件之间通信的七种方式
Apr 14 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 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
php 文件上传实例代码
2012/04/19 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
angular动态表单制作
2018/02/23 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
Python 文件操作实现代码
2009/10/07 Python
Python创建文件和追加文件内容实例
2014/10/21 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
Python: glob匹配文件的操作
2020/12/11 Python
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
某公司Java工程师面试题笔试题
2016/03/27 面试题
优秀员工表扬信
2014/01/17 职场文书
运动会加油稿30字
2015/07/21 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
Python装饰器的练习题
2021/11/23 Python