我如何使用Deezer Api？

问题描述

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

  $ .getJSON（'http://api.deezer.com/search/artists?q=' （），
函数（数据）{
 $（＃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不能加载http://api.deezer.com/search/artists?q=whatever。请求的资源上没有Access-Control-Allow-Origin标题。 Origin'null'因此不被允许访问。

如何让它起作用？

解决方案

由于浏览器阻止请求，因此引发错误。因为您可以从您自己的网站或本地主机的JavaScript执行此操作，因此您可以通过调用其他网址（Deezer网址）来执行跨网站请求。有多种方法可以解决这个问题。

1. 使用jsonp尝试以下'hack'：
   
   

     //使用YQL和JSONP 
    $ .ajax（{
    url：http://api.deezer.com/search / artists？q =+ q，
    
    //由YQL服务指定的回调参数的名称
    jsonp：callback，
    
    //告诉jQuery我们期待JSONP 
    dataType：jsonp，
    
    //告诉YQL我们想要什么，我们想要JSON 
    data：{
   格式：json
   }，
    
    //使用响应
   成功：函数（响应）{
    $（＃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>）; 
    
   } 
   }）; 
     

   来源：

或2.您通过自己的服务器发送请求。
使用像php这样的服务器端语言，向Deezer Api发出请求，并使用jQuery调用该PHP页面。

I'm trying to use the deezer api to look up artists and display their name and image using Jquery. Here's my code:

 $.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>");
   });
});

but it just won't work. The code seems fine, but it keeps throwing up this error message, which I haven't a clue about or how to fix:

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.

How do I get it to work?

解决方案

The error is thrown because your browser is blocking the request. Because you execute this from javascript from your own site or maybe localhost, you do a cross-site request by calling a different url (the Deezer url). There are multiple ways to solve this problem.

1. Try the following 'hack' with jsonp:

   // 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>");
   
            }
   });
   

   Source: https://learn.jquery.com/ajax/working-with-jsonp/

Or 2. You route the request through your own server.With a server side language like php you do the request to the Deezer Api, and with jQuery you call that php page.

这篇关于我如何使用Deezer Api？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！