jquery ajax同步異步的執(zhí)行最終解決方案
更新時(shí)間:2013年04月26日 16:40:59 作者:
添加async:false.即修改為同步了,什么意思?按同事解釋就是,這是等這個(gè)ajax有了返回值后才會(huì)執(zhí)行下面的js一語(yǔ)道破天機(jī),怪不得以前很多ajax調(diào)用里面的賦值都不起作用
大家先看一段簡(jiǎn)單的jquery ajax 返回值的js
代碼
function getReturnAjax{
$.ajax({
type:"POST",
http://www.cnblogs.com/wlmemail/admin/%22ajax/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'>該用戶已被注冊(cè)</font></b>",false);
vusername.className="bigwrong";
return false;
}
}
});
}
但是我們調(diào)用這個(gè)getReturnAjax()發(fā)現(xiàn)始終取得的都是false,那就是說(shuō)return true,return false根本沒(méi)有起作用,在火狐下用firebug調(diào)試也證明,代碼根本不會(huì)執(zhí)行到return 部分。
我們?cè)囅朐诤瘮?shù)里先定義一個(gè)變量,然后在ajax里賦值,最后在函數(shù)的末尾返回這個(gè)變量,會(huì)不會(huì)有效果呢?我們把代碼修改如下:
代碼
function getAjaxReturn()
{
var bol=false;
$.ajax({
type:"POST",
http://www.cnblogs.com/wlmemail/admin/%22ajax/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'>該用戶已被注冊(cè)</font></b>",false);
vusername.className="bigwrong";
//return false;
}
}
});
return bol;
}
結(jié)果仍然不起作用。最后解決方案有2,如下
1、添加async:false.即修改為同步了,什么意思?(按同事解釋就是,這是等這個(gè)ajax有了返回值后才會(huì)執(zhí)行下面的js。一語(yǔ)道破天機(jī),怪不得以前很多ajax調(diào)用里面的賦值都不起作用)。這樣等ajax給bol賦值完畢后,才執(zhí)行下面的js部分。而剛剛異步的話,還沒(méi)有來(lái)得及賦值,就已經(jīng)return了。
代碼
function getAjaxReturn()
{
var bol=false;
$.ajax({
type:"POST",
async:false,
http://www.cnblogs.com/wlmemail/admin/%22ajax/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'>該用戶已被注冊(cè)</font></b>",false);
vusername.className="bigwrong";
//return false;
}
}
});
return bol;
}
2、 通過(guò)傳入一個(gè)函數(shù)解決這個(gè)問(wèn)題。
代碼
function getAjaxReturn(success_function,fail_function)
{
var bol=false;
$.ajax({
type:"POST",
http://www.cnblogs.com/wlmemail/admin/%22ajax/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'>該用戶已被注冊(cè)</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);
}
代碼
復(fù)制代碼 代碼如下:
function getReturnAjax{
$.ajax({
type:"POST",
http://www.cnblogs.com/wlmemail/admin/%22ajax/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'>該用戶已被注冊(cè)</font></b>",false);
vusername.className="bigwrong";
return false;
}
}
});
}
但是我們調(diào)用這個(gè)getReturnAjax()發(fā)現(xiàn)始終取得的都是false,那就是說(shuō)return true,return false根本沒(méi)有起作用,在火狐下用firebug調(diào)試也證明,代碼根本不會(huì)執(zhí)行到return 部分。
我們?cè)囅朐诤瘮?shù)里先定義一個(gè)變量,然后在ajax里賦值,最后在函數(shù)的末尾返回這個(gè)變量,會(huì)不會(huì)有效果呢?我們把代碼修改如下:
代碼
復(fù)制代碼 代碼如下:
function getAjaxReturn()
{
var bol=false;
$.ajax({
type:"POST",
http://www.cnblogs.com/wlmemail/admin/%22ajax/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'>該用戶已被注冊(cè)</font></b>",false);
vusername.className="bigwrong";
//return false;
}
}
});
return bol;
}
結(jié)果仍然不起作用。最后解決方案有2,如下
1、添加async:false.即修改為同步了,什么意思?(按同事解釋就是,這是等這個(gè)ajax有了返回值后才會(huì)執(zhí)行下面的js。一語(yǔ)道破天機(jī),怪不得以前很多ajax調(diào)用里面的賦值都不起作用)。這樣等ajax給bol賦值完畢后,才執(zhí)行下面的js部分。而剛剛異步的話,還沒(méi)有來(lái)得及賦值,就已經(jīng)return了。
代碼
復(fù)制代碼 代碼如下:
function getAjaxReturn()
{
var bol=false;
$.ajax({
type:"POST",
async:false,
http://www.cnblogs.com/wlmemail/admin/%22ajax/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'>該用戶已被注冊(cè)</font></b>",false);
vusername.className="bigwrong";
//return false;
}
}
});
return bol;
}
2、 通過(guò)傳入一個(gè)函數(shù)解決這個(gè)問(wèn)題。
代碼
復(fù)制代碼 代碼如下:
function getAjaxReturn(success_function,fail_function)
{
var bol=false;
$.ajax({
type:"POST",
http://www.cnblogs.com/wlmemail/admin/%22ajax/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'>該用戶已被注冊(cè)</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);
}
相關(guān)文章
可輸入文字查找ajax下拉框控件 ComBox的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇可輸入文字查找ajax下拉框控件 ComBox的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
jquery操作select取值賦值與設(shè)置選中實(shí)例
下面小編就為大家?guī)?lái)一篇jquery操作select取值賦值與設(shè)置選中實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
Jquery ajaxStart()與ajaxStop()方法(實(shí)例講解)
本篇文章主要是對(duì)Jquery中的ajaxStart()與ajaxStop()方法進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12
jquery autocomplete自動(dòng)完成插件的的使用方法
最近剛開(kāi)始學(xué)jquery,想實(shí)現(xiàn)類似GOOGLE搜索時(shí)自動(dòng)顯示出相關(guān)結(jié)果的效果。于是選擇了使用jquery autocomplete插件。2010-08-08
firefox下jQuery UI Autocomplete 1.8.*中文輸入修正方法
在FF下,切換到中文輸入法,再輸入中文,是不能立即自動(dòng)查詢,需要按下其他按鍵,比如CTRL,后來(lái),通過(guò)修改源代碼即可修復(fù)這個(gè)問(wèn)題2012-09-09
關(guān)于jquery append() html時(shí)的小問(wèn)題的解決方法
關(guān)于jquery append() html時(shí)的小問(wèn)題,碰到類似問(wèn)題的朋友可以參考下。2010-12-12
jQuery動(dòng)態(tài)添加<input type="file">
有時(shí)候需要在頁(yè)面上允許用戶上傳多個(gè)文件,個(gè)數(shù)由用戶自己決定,個(gè)數(shù)多了也可以刪除,使用jQuery可以很簡(jiǎn)單的實(shí)現(xiàn)這個(gè)功能2016-04-04

