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 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
jquery ajax abort()的使用方法
Oct 28 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
复制js对象方法(详解)
Jul 08 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
js取模(求余数)隔行变色
May 15 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 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
PHP新手上路(四)
2006/10/09 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
Python下singleton模式的实现方法
2014/07/16 Python
pandas 选择某几列的方法
2018/07/03 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
美国存储和组织商店:The Container Store
2017/08/16 全球购物
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
制定岗位职责的原则
2013/11/08 职场文书
安全员岗位职责
2013/11/11 职场文书
尊师重教演讲稿
2014/09/04 职场文书
学生吸烟检讨书
2014/09/14 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书