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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 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 Session存储到Redis的方法
2013/11/04 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Python 爬虫模拟登陆知乎
2016/09/23 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
肯尼迪就职演说稿
2013/12/31 职场文书
2014年变电站工作总结
2014/12/19 职场文书
努力学习保证书
2015/02/26 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
MySQL日期时间函数知识汇总
2022/03/17 MySQL
java项目构建Gradle的使用教程
2022/03/24 Java/Android