2011-03-28 83 views
1

我有以下方法:的javascript&jQuery的範圍問題

function priceRange(FESTIVALID){ 
         jQuery.ajax({ 
          url  : '/actions/festheads.cfc?method=getPriceRangeByGUID', 
          type : 'POST', 
          data : 'FESTIVALID='+FESTIVALID, 
          dataType: 'json', 
          success : function(data) { 
           console.info("AJAX:qPrices",data.MINPRICE); 

            formatedPriceRange = '$ '+data.MINPRICE; 
            console.info("AJAX:formatedPriceRange", formatedPriceRange); 

           }//success 
          });//ajax; 


        // 
        return formatedPriceRange; 
       }; 

第二console.info正確顯示formatedPriceRange, 但功能以外是未定義的。

如何在priceRange函數外部訪問此變量? 謝謝

回答

1
  1. 你必須確保在AJAX請求之前完成您訪問價格範圍數據。
  2. 您需要公開success函數範圍之外的價格範圍數據。

這裏是你如何能做到這一點:

function priceRange(FESTIVALID, callback) { 
    jQuery.ajax({ 
     url: '/actions/festheads.cfc?method=getPriceRangeByGUID', 
     type: 'POST', 
     data: 'FESTIVALID=' + FESTIVALID, 
     dataType: 'json', 
     success: function(data) { 
      console.info("AJAX:qPrices", data.MINPRICE); 
      formatedPriceRange = '$ ' + data.MINPRICE; 
      console.info("AJAX:formatedPriceRange", formatedPriceRange); 
      callback.call(this, formatedPriceRange); 
     } //success 
    }); //ajax; 
} 

var myFestivalID = 1; 
priceRange(myFestivalID, function(priceRange) { 
    // this code runs when the ajax call is complete 
    alert('The formatted price range is:' + priceRange); 
}); 
2

這是正常的,這就是AJAX的工作原理。它是異步的,這意味着jQuery.ajax函數立即返回,在這種情況下formatedPriceRange尚未分配一個值,並且一旦服務器響應(可能例如10秒鐘後),將調用成功回調併爲該變量分配一個值值。

因此,請務必在success回調函數內消耗您的AJAX請求的結果。

您還可以將async: false選項傳遞給jQuery.ajax調用,該調用將執行對服務器的同步請求並阻塞,直到檢索結果。很明顯,這將導致您的瀏覽器在執行請求期間被凍結。所以它不再是AJAX(異步Javascript和Xml),而是SJAX(同步Javascript和Xml)。

1

我怎樣才能訪問這個變量出 方priceRange函數?

像Darin說的,你必須在success回調函數中使用你的結果。

假設你正在使用當前的功能是這樣的:

var range = priceRange(festivalId); 
    // ... doing stuff with range variable 

你會想重新組織你的代碼,因此任何你與range變量做從success回調莖。例如,你可以創建一個函數來處理與新範圍更新UI:

function handleRangeVariabe(range) { 
    /// ... do stuff with range variable 
} 

調用它從success

success: function(data) { 
    console.info("AJAX:qPrices",data.MINPRICE); 
    formatedPriceRange = '$ '+data.MINPRICE; 
    console.info("AJAX:formatedPriceRange", formatedPriceRange); 

    handleRangeVariable(formatedPriceRange); 
} 
1

花示例代碼的步驟:

 //declare function 
function priceRange(FESTIVALID, functionCallBack){ 
    //1º step 
    jQuery.ajax({ 
     url  : '/actions/festheads.cfc?method=getPriceRangeByGUID', 
     type : 'POST', 
     data : 'FESTIVALID='+FESTIVALID, 
     dataType: 'json', 
     success : function(data) { 

      //3º step, because this function will only trigger when server responds to request 
      //handle data in other function 
      functionCallBack(data); 

      }//success 
     });//ajax; 

    //more code 
    //2º step 

    //no return value, because this method no know when the data will return of server 
    //return formatedPriceRange; 
}; 

var formatedPriceRange; 
//using function 
princeRange(1 , function(data){ 
    console.info("AJAX:qPrices",data.MINPRICE); 
    formatedPriceRange = '$ '+data.MINPRICE; 
    console.info("AJAX:formatedPriceRange", formatedPriceRange); 
});