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 相关文章推荐
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
vue配置多页面的实现方法
May 22 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
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
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
浅析javascript闭包 实例分析
2010/12/25 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
Javascript实现单例模式
2016/01/24 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
python用户管理系统的实例讲解
2017/12/23 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
阿波罗盒子:Apollo Box
2017/08/14 全球购物
专业技术职务聘任书
2014/03/29 职场文书
初一学生期末评语
2014/04/24 职场文书
代办社保委托书范文
2014/10/06 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
家装业务员岗位职责
2015/04/03 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸