Spotify Web API，我做错了什么？-Java 学习之路

我正在尝试创建一个网站，通过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>

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

3 回答

你快到了 . 正如其他人指出的那样，主要问题是 '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 + '
' + 					
             'popularity : ' + response.artists.items[i].popularity + '
' + 
             'type : ' + response.artists.items[i].type + '</div></div>';
          }	
          document.getElementById("artists").innerHTML = result;
       }
	}
    </script>


</body>
</html>

回复于 2024-04-20T16:57:32+08:00

问题正是您的控制台所说的： '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');

回复于 2024-04-20T16:57:32+08:00

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

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

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

最后，使用 alert isn 't advised as it won' t记录整个响应 . 使用 console.log ，然后检查控制台 .

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;
  }
}

回复于 2024-04-20T16:57:32+08:00

Spotify Web API，我做错了什么？

3 回答

相关问题