2010-07-21 36 views
64

我有一個jQuery $ .ajax()函數的小問題。jquery - 返回值使用ajax成功的結果

我有一個表單,每次單擊單選按鈕或從下拉菜單中進行選擇時都會使用所選值創建一個會話變量。

現在 - 我有一個下拉菜單有4個選項 - 第一個(帶有標籤None)有一個值=「」其他人有他們的ID。

我想要發生的是無選項(帶空白值)刪除會話和其他創建一個,但只有具有此特定選擇名稱的會話尚不存在 - 因爲所有其他選項都具有相同分配給它的金額 - 它只是表示選擇了哪一個。

我不知道如果是有道理的 - 但看看代碼 - 也許這將使它更清晰:

$("#add_ons select").change(function() { 
     // get current price of the addons 
     var order_price_addon = $(".order_price_addon").text(); 
     // get price of the clicked radio button from the rel attribute 
     var add = $(this).children('option').attr('label'); 
     var name = $(this).attr('name'); 
     var val = $(this).val(); 


     if(val == "") { 
      var price = parseInt(order_price_addon) - parseInt(add); 
      removeSession(name); 
     } else { 
      if(isSession(name) == 0) { 
       var price = parseInt(order_price_addon) + parseInt(add); 
      } 
      setSession(name, val);    
     } 

     $(".order_price_addon").html(price);  
     setSession('order_price_addon', price);   
     updateTotal(); 
}); 

如此 - 首先,當#add_ons選擇菜單觸發「的變化「我們從一些計算元素中獲得了一些值。

我們從我們的select中獲得選項的標籤屬性,它存儲要添加到總數中的值,選擇名稱以創建與此名稱和值的會話,以稍後檢查選中哪一個。

現在我們檢查val ==「」(它將表明None選項已被選中)並且我們從總數中扣除金額以及使用select的名稱刪除會話。

之後就是問題出現的地方 - else語句。

否則 - 我們想檢查isSession()函數是否返回0或1 - 如果它返回0,那麼我們將存儲在label屬性中的值加起來,但如果它返回1 - 這會提示會話已經存在 - 然後我們只通過重新創建來更改此會話的值 - 但不會將其添加到該會話中。

現在isSession功能如下:

function isSession(selector) { 
    $.ajax({ 
     type: "POST", 
     url: '/order.html', 
     data: ({ issession : 1, selector: selector }), 
     dataType: "html", 
     success: function(data) { 
      return data; 
     }, 
     error: function() { 
      alert('Error occured'); 
     } 
    }); 
} 

現在 - 問題是 - 我不知道是否使用「迴歸」將會從函數返回的結果 - 因爲它似乎沒有不工作 - 但是,如果我將「數據」放入警報的成功部分 - 它似乎會返回正確的值。

有誰知道如何從函數返回值,然後在下一個語句中比較它?


由於球員 - 我已經嘗試了以下列方式:

function isSession(selector) { 
    $.ajax({ 
     type: "POST", 
     url: '/order.html', 
     data: ({ issession : 1, selector: selector }), 
     dataType: "html", 
     success: function(data) { 
      updateResult(data); 
     }, 
     error: function() { 
      alert('Error occured'); 
     } 
    }); 
} 

則updateResult()函數:

功能updateResult(數據){ 結果=數據; }

結果 - 是全局變量 - 這我那麼想讀:

$("#add_ons select").change(function() { 
     // get current price of the addons 
     var order_price_addon = $(".order_price_addon").text(); 
     // get price of the clicked radio button from the rel attribute 
     var add = $(this).children('option').attr('label'); 
     var name = $(this).attr('name'); 
     var val = $(this).val(); 


     if(val == "") { 
      var price = parseInt(order_price_addon) - parseInt(add); 
      removeSession(name); 
     } else { 
      isSession(name); 
      if(result == 0) { 
       var price = parseInt(order_price_addon) + parseInt(add); 
      } 
      setSession(name, val);    
     } 

     $(".order_price_addon").html(price);  
     setSession('order_price_addon', price);   
     updateTotal(); 
    }); 

但由於某種原因 - 這是行不通的 - 任何想法?

+0

可能重複[如何返回從AJAX調用的響應?( http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) – Bergi 2013-04-15 22:22:38

+16

'我有一個jQuery的小問題....'這是最長的小問題我曾見過......;) – prageeth 2015-05-26 13:47:13

回答

86

麻煩的是,您無法從異步調用(如AJAX請求)返回值,並期望它可以正常工作。

原因是等待響應的代碼在收到響應時已經執行完畢。

解決此問題的方法是在success:回調中運行必要的代碼。這樣,只有在可用時纔會訪問data

function isSession(selector) { 
    $.ajax({ 
     type: "POST", 
     url: '/order.html', 
     data: ({ issession : 1, selector: selector }), 
     dataType: "html", 
     success: function(data) { 
      // Run the code here that needs 
      // to access the data returned 
      return data; 
     }, 
     error: function() { 
      alert('Error occured'); 
     } 
    }); 
} 

另一種可能性(這實際上是一回事)是打電話給你success:回調傳遞數據時,可用它裏面的函數。

function isSession(selector) { 
    $.ajax({ 
     type: "POST", 
     url: '/order.html', 
     data: ({ issession : 1, selector: selector }), 
     dataType: "html", 
     success: function(data) { 
       // Call this function on success 
      someFunction(data); 
      return data; 
     }, 
     error: function() { 
      alert('Error occured'); 
     } 
    }); 
} 

function someFunction(data) { 
    // Do something with your data 
} 
+7

您可以從AJAX請求中返回一個值,但只有當你使它*非異步*(設置選項'async:false')。在某些情況下,不需要異步調用。更多關於jquery.ajax()doc http://api.jquery.com/jQuery.ajax/,不是說從jQuery 1.8開始,jjXHR($ .Deferred)的async:false的使用已被廢棄;' – 2013-07-12 09:05:27

+31

'非異步「當然也可以稱爲」同步「;) – 2014-02-03 17:43:17

+0

在你建議的兩種方法中;即。成功運行函數,然後你必須爲不同的場景編寫多個Ajax。這無助於創建全局ajax包裝器引擎。 – wpcoder 2017-11-03 22:45:46

26

有許多方法可以獲得jQuery ajax響應。我跟大家分享兩個共同的計算策略:

第一:

使用異步=虛假並在函數返回Ajax的對象,後來得到 響應Ajax的object.responseText

/** 
* jQuery ajax method with async = false, to return response 
* @param {mix} selector - your selector 
* @return {mix}   - your ajax response/error 
*/ 
function isSession(selector) { 
    return $.ajax({ 
     type: "POST", 
     url: '/order.html', 
     data: { 
      issession: 1, 
      selector: selector 
     }, 
     dataType: "html", 
     async: !1, 
     error: function() { 
      alert("Error occured") 
     } 
    }); 
} 
// global param 
var selector = !0; 
// get return ajax object 
var ajaxObj = isSession(selector); 
// store ajax response in var 
var ajaxResponse = ajaxObj.responseText; 
// check ajax response 
console.log(ajaxResponse); 
// your ajax callback function for success 
ajaxObj.success(function(response) { 
    alert(response); 
}); 

第二張:

使用$ .extend 方法,使如AJAX新功能

/** 
* xResponse function 
* 
* xResponse method is made to return jQuery ajax response 
* 
* @param {string} url [your url or file] 
* @param {object} your ajax param 
* @return {mix}  [ajax response] 
*/ 
$.extend({ 
    xResponse: function(url, data) { 
     // local var 
     var theResponse = null; 
     // jQuery ajax 
     $.ajax({ 
      url: url, 
      type: 'POST', 
      data: data, 
      dataType: "html", 
      async: false, 
      success: function(respText) { 
       theResponse = respText; 
      } 
     }); 
     // Return the response text 
     return theResponse; 
    } 
}); 

// set ajax response in var 
var xData = $.xResponse('temp.html', {issession: 1,selector: true}); 

// see response in console 
console.log(xData); 

你可以讓你想把它當作大...

+0

不錯的想法,但'ajaxObj ['responseText']'不存在當你定義'var ajaxResponse' – mu3 2014-08-20 01:27:41

+0

完美!你的第一個解決方案救了我 – 2015-05-05 11:02:18

+0

第二種方法是100%A OK! ;) – 2016-02-24 14:27:49

2

這是很老,而且醜陋,不要這樣做。你應該使用回調:https://stackoverflow.com/a/5316755/591257
有同樣的問題,用這種方法解決它,使用全局變量。不知道這是否是最好的,但肯定是有效的。出錯時,你會得到一個空字符串(myVar =''),所以你可以根據需要處理它。

var myVar = ''; 
function isSession(selector) { 
    $.ajax({ 
    'type': 'POST', 
    'url': '/order.html', 
    'data': { 
     'issession': 1, 
     'selector': selector 
    }, 
    'dataType': 'html', 
    'success': function(data) { 
     myVar = data; 
    }, 
    'error': function() { 
     alert('Error occured'); 
    } 
    }); 
    return myVar; 
} 
+2

您還需要在此處添加'async:false',因爲在異步模式下,不能保證在返回myVar之前將數據保存到'myVar'中。 – 2014-07-03 09:22:17

1
// Common ajax caller 
function AjaxCall(url,successfunction){ 
    var targetUrl=url; 
    $.ajax({ 
    'url': targetUrl, 
    'type': 'GET', 
    'dataType': 'json', 
    'success': successfunction, 
    'error': function() { 
     alert("error"); 
    } 
    }); 
} 

// Calling Ajax 
$(document).ready(function() { 
    AjaxCall("productData.txt",ajaxSuccessFunction); 
}); 

// Function details of success function 
function ajaxSuccessFunction(d){ 
    alert(d.Pioneer.Product[0].category); 
} 

它可以幫助,共同打造Ajax調用功能和附加其調用成功時,Ajax調用的函數,見例如

3

添加async: false到您的屬性列表。這迫使JavaScript線程等待,直到返回值被檢索之後再繼續。顯然,在任何情況下你都不想這樣做,但是如果在繼續之前需要一個價值,那麼這就做到了。

+2

你永遠不應該設置'async:false'。這會在檢索期間阻止頁面上的每次散列。您知道AJAX中的A代表什麼:異步。正確的答案是OP需要正確使用'success()'回調。 – nietonfir 2013-11-01 20:49:40

+2

我承認所有事情都必須等待。在某些情況下,調用函數可能需要返回的值,例如添加新記錄並需要返回記錄標識。一旦你知道規則,你知道什麼時候可以被打破。永不說永不。這是其他人同意的。 (http://stackoverflow.com/questions/3880361/returning-the-response-from-an-jquery-ajax-call) – Hoodlum 2013-12-20 19:05:54

+0

這樣做也是錯誤的,所描述的問題可以用異步方式輕鬆解決。相反,您不會通過進行同步呼叫來獲得任何收益。 – nietonfir 2013-12-21 01:12:43

0

嗨嘗試異步:假在你的Ajax調用..

+0

由於@quikewee指出jquery 1.8已棄用。 – wpcoder 2017-11-03 22:48:16

4

我看到,這裏的答案,雖然有幫助,他們不正是我想要的,因爲我不得不改變了很多我的代碼。

什麼制定了我,在做這樣的事情:

function isSession(selector) { 
    //line added for the var that will have the result 
    var result = false; 
    $.ajax({ 
     type: "POST", 
     url: '/order.html', 
     data: ({ issession : 1, selector: selector }), 
     dataType: "html", 
     //line added to get ajax response in sync 
     async: false, 
     success: function(data) { 
      //line added to save ajax response in var result 
      result = data; 
     }, 
     error: function() { 
      alert('Error occured'); 
     } 
    }); 
    //line added to return ajax response 
    return result; 
} 

希望可以幫助別人

阿納金

+2

你實際上只是關閉異步 – 2016-04-06 00:32:04