jquery ajax 同步异步的执行 return值不能取得的解决方案


Posted in Javascript onJanuary 08, 2012

大家先看一段简单的jquery ajax 返回值的js

代码

function getReturnAjax{ 
$.ajax({ 
type:"POST", 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", 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, 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", 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 相关文章推荐
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
js实现无缝滚动特效
Dec 20 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 #Javascript
分享几个超级震憾的图片特效
Jan 08 #Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 #Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 #Javascript
人人网javascript面试题 可以提前实现下
Jan 05 #Javascript
javascript是怎么继承的介绍
Jan 05 #Javascript
js 链式延迟执行DOME
Jan 04 #Javascript
You might like
php相当简单的分页类
2008/10/02 PHP
php跨站攻击实例分析
2014/10/28 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
JS DOM 操作实现代码
2010/08/01 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
小程序自定义日历效果
2018/12/29 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
简单了解python单例模式的几种写法
2019/07/01 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
《雨霖铃》听课反思
2014/02/13 职场文书
项目合作协议书
2014/04/16 职场文书
工伤事故证明
2014/10/20 职场文书
大班上学期个人总结
2015/02/13 职场文书
自主招生英文自荐信
2015/03/25 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
责任书范本大全
2015/05/11 职场文书
南京南京观后感
2015/06/02 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python