Question

我有以下方法：

    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函数外面访问这个变量？感谢

Answer 1

这是正常的，这就是AJAX的工作方式。它是异步的，意味着jQuery.ajax函数立即返回，在这种情况下formatedPriceRange尚未分配值，一旦服务器响应（例如10秒后），成功回调调用并为变量赋值。

因此，请始终在success回调函数中使用AJAX请求的结果。

您还可以将async: false选项传递给jQuery.ajax调用，该调用将对服务器执行同步请求并阻塞，直到检索到结果。显然，这会导致您的浏览器在执行请求期间冻结。所以它不再是AJAX（异步Javascript和Xml）而是SJAX（同步Javascript和Xml）。

Answer 2

如何访问此变量价格范围功能？

就像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);
}

Answer 3

在访问价格范围数据之前，您必须确保AJAX请求完成。
您需要公开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);
});

Answer 4

完成示例代码的步骤：

     //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);
});

javascript＆amp; jQuery范围问题

4 个答案: