如何在jQuery中引入回调函数来返回AJAX数据？

Question

我正在尝试从函数 crimeTrendTable 中返回一些数据，该函数使用 jQuery .ajax 从 Web 中提取一些数据，并将其返回到一个名为 postcodeConvert 的函数。

我想我需要实现一个回调函数，以确保它只在返回数据后才返回信息，但我有点困惑如何去做？

$(document).ready(function()
{
function crimeTrendTable(latitude, longitude){
    //Find all available dates
    availability_url = "http://policeapi2.rkh.co.uk/api/crimes-street-dates";
    listings = $.ajax({
                  
        dataType: 'jsonp',
        url: availability_url, 
        success: function(data){
            latest = data[0]['date'];
            three_months_date = data[3]['date'];
            six_months_date = data[6]['date'];
            year_ago_date = data[12]['date'];
            list_dates = [latest, three_months_date, six_months_date, year_ago_date];
        },
        error: function(jqXHR, textStatus, errorThrown){ 
            $('#results').html('<h2>Something went wrong!</h2><p><b>' + textStatus  + '</b> ' + errorThrown  + '</p>');
        }
    })
   
    
} 
function postcodeConvert(entry){

    //Convert to upper case
    entry = entry.toUpperCase().replace(" ", "");
    base_url = "http://mapit.mysociety.org/postcode/";
    query_url = base_url+entry;
    console.log(query_url);
    $.getJSON(query_url, function(data){
        $('div#results').html("<p>Latitude: "+data['wgs84_lat']+"</p><p>Longitude: "+data['wgs84_lon'])+"</p>";
        data_results = "";
        data_results = crimeTrendTable(data['wgs84_lat'], data['wgs84_lon']);
        console.log("postcode"+data_results);
        return data_results;
    })
    
}    

$('#postcode').focus(); //ensure the place field is the first box highlighted
      //Disable the submit button from sending anything as we don't need to...
$('#form_submit').submit(function(){
  return false;
});//end submit function
$(':submit').click(function(){
    //function convert text box postcode into lat long
 if ($('#postcode').val() !=''){
    entry = $('#postcode').val();
    postcodeConvert(entry);           
 }  
}); 

});

Answer 1

从服务器返回数据时会运行此方法/函数（http状态为200）

function(data){
        latest = data[0]['date'];
        three_months_date = data[3]['date'];
        six_months_date = data[6]['date'];
        year_ago_date = data[12]['date'];
        list_dates = [latest, three_months_date, six_months_date, year_ago_date];
    }

如果您在该函数中添加对该方法的调用，它将在您获得数据时运行。否则，您可以在“成功：”中写一个方法名称，如果您更容易拥有一个单独的功能，例如：

function callback(data) {
  // do something with data
}

$.ajax({

    dataType: 'jsonp',
    url: availability_url, 
    success: callback,
    error: function(jqXHR, textStatus, errorThrown){ 
        $('#results').html('<h2>Something went wrong!</h2><p><b>' + textStatus  + '</b> ' + errorThrown  + '</p>');
    }
});

Answer 2

你说得对，你需要一个回调来从 postcodeConvert 函数中获取数据结果。

你现在的回报

return data_results;

真的不会做任何事情。如果您修改postcodeConvert 函数定义，使其接受回调参数

function postcodeConvert(entry, callback) {

并将您的 return 语句更改为回调调用

callback(data_results)

然后你可以像这样调用你的postcodeConvert函数：

postcodeConvert(entry, function(data_results) {
// use data_results
});

Answer 3

如果您返回 ajax XHR 对象，您可以使用内置的done() 回调来确保数据可用：

$(document).ready(function() {
function crimeTrendTable(latitude, longitude){
    return $.ajax({
        dataType: 'jsonp',
        url: availability_url, 
        error: function(jqXHR, textStatus, errorThrown){ 
            //error function does'nt work with JSONP, remove this
        }
    }):
}

function postcodeConvert(entry){
    /* more stuff here */
    return $.getJSON(query_url, function(data){
        $('div#results').html("<p>Latitude: "+data['wgs84_lat']+"</p><p>Longitude: "+data['wgs84_lon'])+"</p>";
        return crimeTrendTable(data['wgs84_lat'], data['wgs84_lon']);
    }):
}    

$('input[type="submit"]').click(function(e){
    e.preventDefault();
    if ($('#postcode').val() !=''){
       entry = $('#postcode').val();
       postcodeConvert(entry).done(function(data) {
          //data is now avaiable here
          latest = data[0]['date'];
          three_months_date = data[3]['date'];
          six_months_date = data[6]['date'];
       });
    }  
}); 

请注意，您的代码中有一些错误，例如所有变量都是全局变量？