Spotify Web API, что я делаю не так? - PullRequest
Новая
       5

Spotify Web API, что я делаю не так?

0 голосов
/ 30 мая 2018

Я пытаюсь создать сайт, на котором через веб-API Spotify я отображаю информацию определенного элемента (Artist, Track, Album и т. Д.).Не имея большого опыта в разработке программного обеспечения, я опирался на руководства в Интернете и написал следующий код, но он не дает результатов 

<!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 ]

0 голосов
/ 30 мая 2018

Попробуйте посмотреть на консоль для дальнейшего использования.

Ваша первая ошибка заключается в том, что вы не должны включать двоеточие : в первый параметр.

Во-вторых, вы никогда не устанавливаете обработчик onload.Без этого объект xhr не знает, что делать с вашими извлеченными данными.

Наконец, использование alert не рекомендуется, так как он не регистрирует весь ответ.Используйте 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;
  }
}
0 голосов
/ 30 мая 2018

Вы почти у цели.Как отмечают другие, основная проблема - '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>
0 голосов
/ 30 мая 2018

Проблема именно в том, что говорит ваша консоль: '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');
...