我有一个简单的函数,可以从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 对象不会更新,然后函数返回响应。
任何想法都会有所帮助,谢谢!
您可以使用回调:
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 无关。
从 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
});
}
第二个示例不起作用,因为当您设置$("#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"));
您可以将 onSuccess
参数添加到 ajax 函数完成时调用的reverseGeocoding
函数
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);