jQuery中的AJAX回调返回值处理答案

【问题标题】：AJAX callback return value handling in jQueryjQuery中的AJAX回调返回值处理
【发布时间】：2012-11-25 14:51:36
【问题描述】：

我有一个从 mapquest 获取 gis 数据的简单函数：

function reverseGeocoding(lat,lng){
    var url = 'http://open.mapquestapi.com/nominatim/v1/reverse?format=json&lat=' + lat + '&lon=' +lng+' &zoom=18&addressdetails=1';
    $.ajax({
        url: url,                       
        crossDomain:true,
        success: function(response){                
            $("#revgeo-place").html(response.display_name);                 
        }
    });

}

如何改进它，以便在从另一个函数调用此函数时，返回值异步更新？

我不想在函数中显式放置任何 DOM 引用，我想保持 ajax 异步，理想情况下应该是这样的：

$("#revgeo-place").html(reverseGeocoding(lat,lng).display_name);

function reverseGeocoding(lat,lng){
    var url = 'http://open.mapquestapi.com/nominatim/v1/reverse?format=json&lat=' + lat + '&lon=' +lng+' &zoom=18&addressdetails=1';
    $.ajax({
        url: url,                       
        crossDomain:true,
        success: function(response){
            console.log(response);
            return response;                                    
        }
    });

}

看起来当我这样做时 DOM 对象没有更新，然后函数返回响应。

任何想法都会有所帮助，谢谢！

【问题讨论】：

标签： javascript jquery ajax callback return

【解决方案1】：

从 ajax 调用返回延迟对象，并在 ajax 调用完成时使用done() 函数更新 HTML：

reverseGeocoding(lat,lng).done(function(data) {
    $("#revgeo-place").html(data.display_name);
});

function reverseGeocoding(lat,lng){
    var url = 'http://open.mapquestapi.com/nominatim/v1/reverse?format=json&lat=' + lat + '&lon=' +lng+' &zoom=18&addressdetails=1';
    return $.ajax({
        url: url,                       
        crossDomain:true
    });
}

【讨论】：

【解决方案2】：

您的第二个示例不起作用，因为当您设置 $("#revgeo-place").html() 的值时，AJAX 请求的值没有返回。

如果您希望能够修改更新的元素，请将其作为参数添加到您的函数中，如下所示：

function reverseGeocoding(lat, lng, $updateElement){
    var url = 'http://open.mapquestapi.com/nominatim/v1/reverse?format=json&lat=' + lat + '&lon=' +lng+' &zoom=18&addressdetails=1';
    $.ajax({
        url: url,                       
        crossDomain:true,
        success: function(response){                
            $updateElement.html(response.display_name);                 
        }
    });
}

reverseGeocoding(latitude, longitude, $("#revgeo-place"));

【讨论】：

【解决方案3】：

您可以在 ajax 函数完成时调用的 reverseGeocoding 函数中添加一个 onSuccess 参数

function reverseGeocoding(lat, lng, onSuccess){
    var url = 'http://open.mapquestapi.com/nominatim/v1/reverse?format=json&lat=' + lat + '&lon=' +lng+' &zoom=18&addressdetails=1';
    $.ajax({
        url: url,                       
        crossDomain:true,
        success: function(response){
            onSuccess();                                 
        }
    });
}

function onReverseGeocodingSuccess() {
    $("#revgeo-place").html(response.display_name); 
}

reverseGeocoding(100, 200, onReverseGeocodingSuccess);

【讨论】：

【解决方案4】：

你可以使用回调：

function reverseGeocoding(lat,lng, callback){
    var url = 'http://open.mapquestapi.com/nominatim/v1/reverse?format=json&lat=' + lat + '&lon=' +lng+' &zoom=18&addressdetails=1';
    $.ajax({
        url: url,                       
        crossDomain: true,
        success: callback
    });
};

reverseGeocoding(lat,lng, function(response){

    $("#revgeo-place").html(response.display_name);

});

所以您的 reverseGeocoding 函数与 DOM 无关。

【讨论】：

这是一个很好的技术，尽管我添加了状态来返回真或假。现在功能完善了
@raheelshan 您的代码将始终返回 true，因为回调是异步调用到 ajax 调用的 success 处理程序中的。尽管如此，提供的回调没有返回任何东西，所以我看不到这样的status var ^^