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 相关文章推荐
用JavaScript修改CSS属性的代码
May 06 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 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
php分页函数
2006/07/08 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
浅析php原型模式
2014/11/25 PHP
Yii框架登录流程分析
2014/12/03 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
施工员岗位职责
2014/03/16 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
期中考试复习计划
2015/01/19 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
工作证明格式范文
2015/06/15 职场文书
《观察物体》教学反思
2016/02/17 职场文书