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 相关文章推荐
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
vue实现登录拦截
Jun 29 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
玩转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 缩略图实现函数代码
2011/06/23 PHP
PHP URL路由类实例
2013/11/12 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
一个简单的js动画效果代码
2010/07/20 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
python脚本内运行linux命令的方法
2015/07/02 Python
python 系统调用的实例详解
2017/07/11 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
vscode调试django项目的方法
2020/08/06 Python
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
餐厅销售主管职责范本
2014/02/19 职场文书
实习介绍信模板
2015/01/30 职场文书
员工家属慰问信
2015/03/24 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js