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的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
vuex实现简易计数器
Oct 27 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 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
虫族 ZERG 概述
2020/03/14 星际争霸
PHP 地址栏信息的获取代码
2009/01/07 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
PHP实现简易blog的制作
2016/10/24 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
js实现简单扫雷
2020/11/27 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
Python实现调度算法代码详解
2017/12/01 Python
Python3计算三角形的面积代码
2017/12/18 Python
python实现SOM算法
2018/02/23 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
安装docker-compose的两种最简方法
2019/07/30 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
新大陆软件面试题
2016/11/24 面试题
某公司部分笔试题
2013/11/05 面试题
实习求职信
2013/12/01 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
迟到检讨书
2015/01/26 职场文书