如何在 api 中使用 jsonp 回调函数

Question

我正在尝试调用 BandsInTown api，在我的请求 url 中使用 &callback= parameter 一个 jsonp 对象 returns。我对它如何与 Jquery 调用结合使用感到困惑。我的代码看起来像这样，但什么也没做：

    var shows=[];
    var locat = "Denver,CO";
    var artists = ["Twenty One Pilots", "Atmosphere", "Vince Staples", "STRFKR", "Rainbow Kitten Surprise", "Mac Demarco", "Hippo Campus", "Drake", "John Legend", "Rihanna", "Flying Lotus", "MGMT", "Jason Derulo", "M83", "Bon Iver", "Childish Gambino"];    
    for (var i = 0; i < artists.length; i++) {
        parseEvent(artists[i], locat, shows);    
    }

function parseEvent(artist, locat, showsObject) {
    var url = 'http://api.bandsintown.com/artists/' + artist + '/events/search.json?api_version=2.0&app_id=music_matcher&location=' + locat + '&radius=150&callback=bandsInInfo';

    $.ajax({
       url: url,
       dataType: 'jsonp',
       jsonpCallback: 'bandsInInfo'
    });
}

function bandsInInfo(data) {
alert("workingBandy");
alert(data);
    var numEvents = Object.keys(data).length;       
    for (var j = 0; j < numEvents; j++) {

        if (!(data[j].venue.latitude == null && data[j].venue.latitude == 'undefined')) {
            var element = 
             { 
                "location": {"latitude": data[j].venue.latitude, "longitude": data[j].venue.longitude},
                "artist": data[j].artists[0].name,
                "venue_name": data[j].venue.place,
                "date": data[j].datetime,
                "ticket_url": data[j].ticket_url,
                "ticket_status": data[j].ticket_status,
                "title": data[j].title
            };

            showsObject.push(element);
            }   
    }


}

或者如果没有 Jquery 也可以做到这一点？这是 api 文档。除了将响应发送到您指定的回调函数这一事实外，对此没有太多提及。 https://www.bandsintown.com/api/requests#artists-events提前感谢您的帮助或建议！

Answer 1

JSONP 回调函数与您要调用的函数（bandsInInfo）不同。当您将数据类型定义为 'jsonp' 时，jQuery 将为您管理回调函数。因此，我将从您的查询字符串中删除最后一个参数。

您应该将成功和错误属性添加到您的 $.ajax 选项中：

function parseEvent(artist, locat, showsObject) {
    var url = 'http://api.bandsintown.com/artists/' + artist + '/events/search.json?api_version=2.0&app_id=music_matcher&location=' + locat + '&radius=150';

    $.ajax({
       url: url,
       dataType: 'jsonp',
       success: function(data){
         bandsInInfo(data);
       },
       error: function(err){
         console.log(err)
       }
    });
}

如何在 api 中使用 jsonp 回调函数

How to use a jsonp callback function with api

javascript

jquery

jsonp