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 相关文章推荐
div+css布局的图片连续滚动js实现代码
May 04 Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 Javascript
JS通用方法触发点击事件代码实例
Feb 17 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
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
js 窗口抖动示例
2013/09/04 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
vue-router相关基础知识及工作原理
2018/03/16 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
解决PyCharm中光标变粗的问题
2017/08/05 Python
Python金融数据可视化汇总
2017/11/17 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
就业推荐表自我鉴定
2013/10/29 职场文书
电子信息专业自荐书
2014/02/04 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
职称评定个人总结
2015/03/05 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
敬老院活动感想
2015/08/07 职场文书