Question

我正在尝试创建一个网站，通过Spotify Web API，我可以显示某个元素（艺术家，曲目，专辑等）的信息。在软件开发方面不是很有经验，我依靠互联网上的指南，我写了下面的代码，但它没有给出结果

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
    <button type="button" onclick="processRequest()">Try it</button>

    <script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "https://api.spotify.com/v1/search?q=Muse&type=track%2Cartist&market=US&limit=10&offset=5", true);
    xhr.setRequestHeader('Accept: ', 'application/json');
    xhr.setRequestHeader('Content-Type: ', 'application/json');
    xhr.setRequestHeader('Authorization: ', 'Bearer BQDWk5QhO-CDvXu6nYDbSMP_nubWIMDH6HDX5hPaQlGWIhim4f2qcCJADFVSePyhhCLklKgyXKhPIyRUWa_RpbB97lKKnQHoq4r3ahfw4friE8-fw8gcvchHGDdYv6PuLp1yXDYooNwuNuG-MDhub2WnNj-SUd9W6SadBOhJMeDabIXIWfVMizjeTdldIsNDriPznZnDB4vFTQ4oYfHrSIfh_D9M9noALwOY2cptpC_dKaF7reI-WN1nAEbgGewqTAmtNaOEEuY');
    xhr.send();

    function processRequest(e) {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var response = JSON.parse(xhr.responseText);
        alert(response.artists);
        document.getElementById("artists").innerHTML = this.responseText;
    }
}
    </script>


</body>
</html>

唯一出现的是按钮，但如果按下它，绝对没有任何反应。我希望你能帮助我。

Answer 1

你快到了。正如其他人指出的那样，主要问题是'Accept'。

您可以在Full Page中运行以下代码。

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
	
    <button type="button" onclick="processRequest()" class="btn btn-primary">Try it</button>
	<div id="artists"></div>
	
    <script>
    /*var spotifyApi = new SpotifyWebApi();
    spotifyApi.setAccessToken('BQDSL01Fr_kd_cph_LVSymXBJu_0gEq75IC3zTSki4eSg_Uwum5tTDUm0d8tvyCQpaXSkfxR32ABFV7sgAZfHUKqMJXLkedeSLDF6v5mU98y3mnlYWZt1wQ_mWhPCTqXCZv-Vt_PWbyxZ-fHQy5Ryp5xby2EBqVTkQ&refresh_token=AQD1ZUVO6xgq7Ol-__h1aE0zf0iqVjsKxzr062CteUsmJZHWA-kT6ebcFpD89D-Qbet99qcbEftR_RrReDvLnWxmK6S4CrjcxFbFXzInLKK-v0JxPNTI6ejC15BBtmlwTAw');*/
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "https://api.spotify.com/v1/search?q=Muse&type=track%2Cartist&market=US&limit=10&offset=5", true);
    xhr.setRequestHeader('Accept', 'application/json');
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.setRequestHeader('Authorization', 'Bearer BQDWk5QhO-CDvXu6nYDbSMP_nubWIMDH6HDX5hPaQlGWIhim4f2qcCJADFVSePyhhCLklKgyXKhPIyRUWa_RpbB97lKKnQHoq4r3ahfw4friE8-fw8gcvchHGDdYv6PuLp1yXDYooNwuNuG-MDhub2WnNj-SUd9W6SadBOhJMeDabIXIWfVMizjeTdldIsNDriPznZnDB4vFTQ4oYfHrSIfh_D9M9noALwOY2cptpC_dKaF7reI-WN1nAEbgGewqTAmtNaOEEuY');
    xhr.send();

    function processRequest(e) {
       if (xhr.readyState == 4 && xhr.status == 200) {
          var response = JSON.parse(xhr.responseText);
          var result = '';
          for(var i = 0; i < response.artists.items.length; i++){
             console.log(response.artists.items[i]);				
             result += '<div class="panel panel-primary"><div class="panel-body">' + 
             'name : ' + response.artists.items[i].name + '<br/>' + 					
             'popularity : ' + response.artists.items[i].popularity + '<br/>' + 
             'type : ' + response.artists.items[i].type + '</div></div>';
          }	
          document.getElementById("artists").innerHTML = result;
       }
	}
    </script>


</body>
</html>

Answer 2

问题正是您的控制台所说的：'Content-Type: ' is not a valid HTTP header field name.。为了将这些更改修复为行：

xhr.setRequestHeader('Content-Type: ', 'application/json');
xhr.setRequestHeader('Authorization: ', 'Bearer BQDWk5QhO-CDvXu6nYDbSMP_nubWIMDH6HDX5hPaQlGWIhim4f2qcCJADFVSePyhhCLklKgyXKhPIyRUWa_RpbB97lKKnQHoq4r3ahfw4friE8-fw8gcvchHGDdYv6PuLp1yXDYooNwuNuG-MDhub2WnNj-SUd9W6SadBOhJMeDabIXIWfVMizjeTdldIsNDriPznZnDB4vFTQ4oYfHrSIfh_D9M9noALwOY2cptpC_dKaF7reI-WN1nAEbgGewqTAmtNaOEEuY');

到：

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer BQDWk5QhO-CDvXu6nYDbSMP_nubWIMDH6HDX5hPaQlGWIhim4f2qcCJADFVSePyhhCLklKgyXKhPIyRUWa_RpbB97lKKnQHoq4r3ahfw4friE8-fw8gcvchHGDdYv6PuLp1yXDYooNwuNuG-MDhub2WnNj-SUd9W6SadBOhJMeDabIXIWfVMizjeTdldIsNDriPznZnDB4vFTQ4oYfHrSIfh_D9M9noALwOY2cptpC_dKaF7reI-WN1nAEbgGewqTAmtNaOEEuY');

Answer 3

尝试查看控制台以供将来参考。

您的第一个错误是您不应该在第一个参数中包含冒号:。

其次，您从未设置onload处理程序。如果没有这个，xhr对象就不知道如何处理检索到的数据。

最后，建议不要使用alert，因为它不会记录整个回复。使用console.log，然后检查控制台。

＆＃13;

var xhr = new XMLHttpRequest();
xhr.open('GET', "https://api.spotify.com/v1/search?q=Muse&type=track%2Cartist&market=US&limit=10&offset=5", true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer ...');
xhr.send();

xhr.onload = function processRequest(e) {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response)
    //document.getElementById("artists").innerHTML = this.responseText;
  }
}

＆＃13;

Spotify Web API，我做错了什么？

3 个答案: