javascript - 如何使用 Deezer Api？

Question

我正在尝试使用 deezer api 查找艺术家并使用 Jquery 显示他们的姓名和图像。这是我的代码：

 $.getJSON('http://api.deezer.com/search/artists?q='+q+'',
    function(data) {
      $("#artists").empty();
      $.each(data, function(i,item){

var y=item.picture;

var z=x+y;

        $("#artists").append("<div id='card_artist'><div id='cardimg' style='background-image: url("+ z +");'></div><div id='artistname' class='jtextfill'><span>" + item.name + "<span></div></div>");
   }); 
});

但它只是行不通。代码看起来不错，但它不断抛出此错误消息，我不知道或如何修复：

XMLHttpRequest cannot load http://api.deezer.com/search/artists?q=whatever. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

我如何让它工作？

Answer 1

抛出错误是因为您的浏览器阻止了请求。因为您从自己的站点或本地主机的 javascript 执行此操作，所以您通过调用不同的 url（Deezer url）来执行跨站点请求。有多种方法可以解决这个问题。

1. 使用 jsonp 尝试以下“hack”：

   // Using YQL and JSONP
   $.ajax({
       url: "http://api.deezer.com/search/artists?q="+q,
   
       // the name of the callback parameter, as specified by the YQL service
       jsonp: "callback",
   
       // tell jQuery we're expecting JSONP
       dataType: "jsonp",
   
       // tell YQL what we want and that we want JSON
       data: {
           format: "json"
       },
   
       // work with the response
       success: function( response ) {
            $("#artists").empty();
            $.each(data, function(i,item){
   
                var y=item.picture;
   
                var z=x+y;
   
                $("#artists").append("<div id='card_artist'><div id='cardimg' style='background-image: url("+ z +");'></div><div id='artistname' class='jtextfill'><span>" + item.name + "<span></div></div>");
   
            }
   });
   

   来源：https ://learn.jquery.com/ajax/working-with-jsonp/

或者 2. 您通过自己的服务器路由请求。使用像 php 这样的服务器端语言，您可以向 Deezer Api 发出请求，而使用 jQuery，您可以调用该 php 页面。