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 选择器引擎sizzle浅析
Feb 06 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
Nuxt.js实战详解
Jan 18 Javascript
vue观察模式浅析
Sep 25 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
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在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
幼儿园秋游活动方案
2014/01/21 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
营销总监岗位职责
2014/09/16 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
六查六看心得体会
2014/10/14 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
先进党员事迹材料
2014/12/24 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS