javascript - AJAX callback return value handling in jQuery - Stack Overflow

admin管理员组

文章数量:1295334

I have this simple function that fetches gis data from mapquest:

function reverseGeocoding(lat,lng){
    var url = ';lat=' + lat + '&lon=' +lng+' &zoom=18&addressdetails=1';
    $.ajax({
        url: url,                       
        crossDomain:true,
        success: function(response){                
            $("#revgeo-place").html(response.display_name);                 
        }
    });

}

How can I improve it so that when this function is called from another function the return value is updated asynchronously?

I don't want to explicitly put any DOM reference in the function, and I want to keep the ajax asynchronous, ideally should be something like this:

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

function reverseGeocoding(lat,lng){
    var url = ';lat=' + lat + '&lon=' +lng+' &zoom=18&addressdetails=1';
    $.ajax({
        url: url,                       
        crossDomain:true,
        success: function(response){
            console.log(response);
            return response;                                    
        }
    });

}

It looks that when I do this the DOM object does not update, and after then the function returns the response.

Any ideas would be helpful thanks!

I have this simple function that fetches gis data from mapquest:

function reverseGeocoding(lat,lng){
    var url = 'http://open.mapquestapi./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);                 
        }
    });

}

How can I improve it so that when this function is called from another function the return value is updated asynchronously?

I don't want to explicitly put any DOM reference in the function, and I want to keep the ajax asynchronous, ideally should be something like this:

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

function reverseGeocoding(lat,lng){
    var url = 'http://open.mapquestapi./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;                                    
        }
    });

}

It looks that when I do this the DOM object does not update, and after then the function returns the response.

Any ideas would be helpful thanks!

• javascript
• jquery
• ajax
• callback
• return

Share Follow edited Dec 7, 2012 at 12:16 Cerbrus 73k1919 gold badges136136 silver badges150150 bronze badges asked Dec 7, 2012 at 12:13 dpidpi 20411 gold badge55 silver badges1717 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

You may use a callback:

function reverseGeocoding(lat,lng, callback){
    var url = 'http://open.mapquestapi./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);

});

So your reverseGeocoding function is agnostic to DOM.

Return the deferred object from the ajax call, and use the done() function to update the HTML when the ajax call is done :

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

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

Your second example doesn't work because the value of the AJAX request has not returned when you set the value of $("#revgeo-place").html().

If you are looking to be able to amend the element which is updated, add it as a parameter to your function like this:

function reverseGeocoding(lat, lng, $updateElement){
    var url = 'http://open.mapquestapi./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"));

You could add a onSuccess parameter to the reverseGeocoding function that is called when the ajax function pletes

function reverseGeocoding(lat, lng, onSuccess){
    var url = 'http://open.mapquestapi./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);

本文标签： javascriptAJAX callback return value handling in jQueryStack Overflow