jquery ajax return没有返回值的解决方法


Posted in Javascript onOctober 20, 2011

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

function getReturnAjax{ 
$.ajax({ 
type:"POST", 
url:"ajax/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", 
url:"ajax/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, 
url:"ajax/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", 
url:"ajax/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); 
}

按需选择自己需要的方案吧。一般大网站都采用第2种传入函数的方式,来处理成功和失败情况下的页面提示。
//添加async:false.即修改为同步 
//等ajax给bol赋值完毕后,才执行下面的js部分。而异步的话,还没有来得及赋值,就已经return了。 
function vcodeYes() { 
var bol = false; 
$.ajax( 
{ 
type: "GET", 
url: "../Ajax/ValidationCode.ashx", 
data: { txtVcode: $('#<%=txtVcode.ClientID%>').val() }, 
async: false, 
success: function (data) { 
if (data == "0") { 
$.dialog({ icon: 'warning', follow: document.getElementById('txtVcode'), content: '验证码错误!' }).time(1); 
changeCaptchaImage('imgVerify2', 'txtVcode'); 
} 
else { 
bol = true; 
} 
} 
}); 
return bol; 
} 
//验证没通过是 返回false 否则执行下面函数 
$('.getVodes').click(function () { 
if (vcodeYes()) { 
。。。执行下面。。。 
} 
});
Javascript 相关文章推荐
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
JavaScript 对象成员的可见性说明
Oct 16 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 Javascript
javascript实现简单留言板案例
Feb 09 Javascript
IE与FireFox中的childNodes区别
Oct 20 #Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 #Javascript
基于jquery的$.ajax async使用
Oct 19 #Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 #Javascript
模拟select的代码
Oct 19 #Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 #Javascript
Notify - 基于jquery的消息通知插件
Oct 18 #Javascript
You might like
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
Element Input组件分析小结
2018/10/11 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Python调用Windows命令打印文件
2020/02/07 Python
pycharm实现猜数游戏
2020/12/07 Python
车辆维修工自我评价怎么写
2013/09/20 职场文书
物流仓储实习自我鉴定
2013/09/25 职场文书
高二生物教学反思
2014/01/27 职场文书
创业计划书模版
2014/02/05 职场文书
手机被没收检讨书
2014/02/22 职场文书
财务部绩效考核方案
2014/05/04 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
2015年度保密工作总结
2015/04/24 职场文书
委托收款证明
2015/06/23 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers
利用Python实现模拟登录知乎
2022/05/25 Python
mysql sql常用语句大全
2022/06/21 MySQL