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 相关文章推荐
js调用flash的效果代码
Apr 26 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
OpenLayer学习之自定义测量控件
Sep 28 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 Javascript
玩转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
再次研究下cache_lite
2007/02/14 PHP
php auth_http类库进行身份效验
2009/03/19 PHP
PHP开发中四种查询返回结果分析
2011/01/02 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
漂亮的提示信息(带箭头)
2007/03/21 Javascript
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
Python生成随机密码的方法
2017/06/16 Python
Python对List中的元素排序的方法
2018/04/01 Python
python开发游戏的前期准备
2019/05/05 Python
django admin组件使用方法详解
2019/07/19 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
工程预算与管理应届生求职信
2013/10/06 职场文书
总经理秘书的岗位职责
2013/12/27 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
贷款工资证明范本
2015/06/12 职场文书
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript