jquery ajax 同步異步的執(zhí)行示例代碼
更新時間:2010年06月23日 10:26:31 作者:
jquery ajax 同步異步的執(zhí)行示例代碼,需要的朋友可以參考下。
大家先看一段簡單的jquery ajax 返回值的js
代碼
function getReturnAjax{
$.ajax({
type:"POST",
http://www.dhdzp.com/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;
}
}
});
}
但是我們調(diào)用這個getReturnAjax()發(fā)現(xiàn)始終取得的都是false,那就是說return true,return false根本沒有起作用,在火狐下用firebug調(diào)試也證明,代碼根本不會執(zhí)行到return 部分。
我們試想在函數(shù)里先定義一個變量,然后在ajax里賦值,最后在函數(shù)的末尾返回這個變量,會不會有效果呢?我們把代碼修改如下:
代碼
function getAjaxReturn()
{
var bol=false;
$.ajax({
type:"POST",
http://www.dhdzp.com/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;
}
結(jié)果仍然不起作用。最后解決方案有2,如下
1、添加async:false.即修改為同步了,什么意思?(按同事解釋就是,這是等這個ajax有了返回值后才會執(zhí)行下面的js。一語道破天機,怪不得以前很多ajax調(diào)用里面的賦值都不起作用)。這樣等ajax給bol賦值完畢后,才執(zhí)行下面的js部分。而剛剛異步的話,還沒有來得及賦值,就已經(jīng)return了。
代碼
function getAjaxReturn()
{
var bol=false;
$.ajax({
type:"POST",
async:false,
http://www.dhdzp.com/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、 通過傳入一個函數(shù)解決這個問題。
代碼
function getAjaxReturn(success_function,fail_function)
{
var bol=false;
$.ajax({
type:"POST",
http://www.dhdzp.com/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);
}
代碼
復(fù)制代碼 代碼如下:
function getReturnAjax{
$.ajax({
type:"POST",
http://www.dhdzp.com/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;
}
}
});
}
但是我們調(diào)用這個getReturnAjax()發(fā)現(xiàn)始終取得的都是false,那就是說return true,return false根本沒有起作用,在火狐下用firebug調(diào)試也證明,代碼根本不會執(zhí)行到return 部分。
我們試想在函數(shù)里先定義一個變量,然后在ajax里賦值,最后在函數(shù)的末尾返回這個變量,會不會有效果呢?我們把代碼修改如下:
代碼
復(fù)制代碼 代碼如下:
function getAjaxReturn()
{
var bol=false;
$.ajax({
type:"POST",
http://www.dhdzp.com/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;
}
結(jié)果仍然不起作用。最后解決方案有2,如下
1、添加async:false.即修改為同步了,什么意思?(按同事解釋就是,這是等這個ajax有了返回值后才會執(zhí)行下面的js。一語道破天機,怪不得以前很多ajax調(diào)用里面的賦值都不起作用)。這樣等ajax給bol賦值完畢后,才執(zhí)行下面的js部分。而剛剛異步的話,還沒有來得及賦值,就已經(jīng)return了。
代碼
復(fù)制代碼 代碼如下:
function getAjaxReturn()
{
var bol=false;
$.ajax({
type:"POST",
async:false,
http://www.dhdzp.com/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、 通過傳入一個函數(shù)解決這個問題。
代碼
復(fù)制代碼 代碼如下:
function getAjaxReturn(success_function,fail_function)
{
var bol=false;
$.ajax({
type:"POST",
http://www.dhdzp.com/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);
}
相關(guān)文章
jquery的ajax異步請求接收返回json數(shù)據(jù)實例
jquery的ajax異步請求接收返回json數(shù)據(jù)方法設(shè)置簡單,一個是服務(wù)器處理程序是返回json數(shù)據(jù),另一種就是ajax發(fā)送設(shè)置的datatype設(shè)置為jsonp格式數(shù)據(jù)或json格式都可以。這篇文章對此進行了實例介紹,需要的朋友可以參考下2014-06-06
jquery實現(xiàn)按Enter鍵觸發(fā)事件示例
按Enter鍵觸發(fā)事件比如提交等等,下面有個不錯的示例,感興趣的朋友可以參考下2013-09-09
jQuery Validation實例代碼 讓驗證變得如此容易
眾所周知,Jquery以其簡潔性讓無數(shù)人為之瘋狂?,F(xiàn)在我要像大家介紹一個jQuery Validation,一看到Validation大家肯定第一直觀感覺就是這肯定是一個驗證框架,沒有錯,本文就是基于jQuery Validation展開討論。2010-10-10
使用Jquery實現(xiàn)點擊文字后變成文本框且可修改
使用Jquery實現(xiàn)點擊文字變?yōu)槲谋究蛐Ч蓪ξ谋究蛭淖诌M行修改,具體的實現(xiàn)思路如下,感興趣的朋友可以參考下,希望對大家有所幫助2013-09-09
jquery二級導(dǎo)航內(nèi)容均分的原理及實現(xiàn)
頭部導(dǎo)航二級導(dǎo)航有些內(nèi)容太長,一列的話太過難看,就要分成兩列,要做到按塊盡量均分,排列順序沒有限制2013-08-08
jQuery 學(xué)習(xí)第五課 Ajax 使用說明
關(guān)于ajax早已不是新鮮話題,而jQuery使ajax變得無比簡單。2010-05-05
jQuery Ajax使用FormData上傳文件和其他數(shù)據(jù)后端web.py獲取
這篇文章主要介紹了jQuery Ajax使用FormData上傳文件和其他數(shù)據(jù)后端web.py獲取 ,需要的朋友可以參考下2017-06-06
JQuery.ajax傳遞中文參數(shù)的解決方法 推薦
許多人在使用JQuery.ajax方法時肯定會遇到一個問題。在編碼不是UTF-8的時候,當傳遞的參數(shù)里有中文的時候,服務(wù)端Request的時候都會出現(xiàn)亂碼。2011-03-03
jQuery實現(xiàn)元素拖拽并cookie保存順序的方法
這篇文章主要介紹了jQuery實現(xiàn)元素拖拽并cookie保存順序的方法,涉及jQuery響應(yīng)鼠標事件實現(xiàn)頁面元素屬性變換的技巧與使用jQuery的cookie插件保存頁面信息的功能,需要的朋友可以參考下2016-02-02

