jquery ajax同步异步的执行最终解决方案


Posted in Javascript onApril 26, 2013

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

function getReturnAjax{ 
$.ajax({ 
type:"POST", 
http://www.cnblogs.com/wlmemail/admin/%22ajax/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", 
http://www.cnblogs.com/wlmemail/admin/%22ajax/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, 
http://www.cnblogs.com/wlmemail/admin/%22ajax/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", 
http://www.cnblogs.com/wlmemail/admin/%22ajax/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 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 #Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 #Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 #Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 #Javascript
基于jquery中children()与find()的区别介绍
Apr 26 #Javascript
基于jQuery选择器的整理集合
Apr 26 #Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 #Javascript
You might like
php cookis创建实现代码
2009/03/16 PHP
php 文本文件的读取效率
2012/02/10 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
python打开文件并获取文件相关属性的方法
2015/04/23 Python
python自定义异常实例详解
2017/07/11 Python
Python匿名函数及应用示例
2019/04/09 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
python dumps和loads区别详解
2020/02/04 Python
python 命名规范知识点汇总
2020/02/14 Python
Python urllib2运行过程原理解析
2020/06/04 Python
pandas apply多线程实现代码
2020/08/17 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
python实现图片转字符画
2021/02/19 Python
初三家长会邀请函
2014/01/18 职场文书
个人对照检查材料
2014/02/12 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
社保委托书怎么写
2014/08/02 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
清洁工工作总结
2015/08/11 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书