jquery ajax 同步異步的執(zhí)行示例代碼
更新時間:2010年06月23日 10:26:31 作者:
jquery ajax 同步異步的執(zhí)行示例代碼,需要的朋友可以參考下。
大家先看一段簡單的jquery ajax 返回值的js
代碼
function getReturnAjax{
$.ajax({
type:"POST",
http://www.dbjr.com.cn/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.dbjr.com.cn/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。一語道破天機(jī),怪不得以前很多ajax調(diào)用里面的賦值都不起作用)。這樣等ajax給bol賦值完畢后,才執(zhí)行下面的js部分。而剛剛異步的話,還沒有來得及賦值,就已經(jīng)return了。
代碼
function getAjaxReturn()
{
var bol=false;
$.ajax({
type:"POST",
async:false,
http://www.dbjr.com.cn/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.dbjr.com.cn/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.dbjr.com.cn/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.dbjr.com.cn/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。一語道破天機(jī),怪不得以前很多ajax調(diào)用里面的賦值都不起作用)。這樣等ajax給bol賦值完畢后,才執(zhí)行下面的js部分。而剛剛異步的話,還沒有來得及賦值,就已經(jīng)return了。
代碼
復(fù)制代碼 代碼如下:
function getAjaxReturn()
{
var bol=false;
$.ajax({
type:"POST",
async:false,
http://www.dbjr.com.cn/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.dbjr.com.cn/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)文章
原生js和jQuery寫的網(wǎng)頁選項(xiàng)卡特效對比
本文實(shí)例中主要是通過判斷點(diǎn)擊菜單在菜單列表中的索引位置來顯示或隱藏選項(xiàng)區(qū).原生js還有很多種實(shí)現(xiàn)方法(藍(lán)色理想中搜索),為了與jQ版思路保持一致,本文實(shí)例用的是循環(huán)判斷.有需要的小伙伴可以參考下2015-04-04Jquery AJAX POST與GET之間的區(qū)別詳細(xì)介紹
這篇文章主要介紹了Jquery AJAX POST與GET之間的區(qū)別詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-10-10jQuery中綁定事件bind() on() live() one()的異同
本文主要介紹了jQuery中綁定事件bind() on() live() one()的異同,具有很好的參考價值,下面跟著小編一起來看下吧2017-02-02jQuery彈出窗口打開鏈接的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery彈出窗口打開鏈接的實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-12-12