Spotify Api 结果 Ajax

Question

在图像中，我的代码仅显示第一个元素（歌曲、图像、艺术家等...）。 我想知道如何让它显示给我：

• 当用户单击该按钮时，会显示一个新模式，其中包含您之前执行的曲目搜索的所有结果。
• 当用户单击其中一个曲目名称时，使用该曲目的信息（包括其音频）更新播放器。

按钮已经创建。

$('#song_btn').on('click', function Search_Song (event) {
event.preventDefault();
var song = $('#song_input').val();
var request = $.get('https://api.spotify.com/v1/search?q=' + song +'&type=track'); 
function Data_Songs (song) {
    var track = song.tracks.items[0];
    $('.song_title').text(track.name); 
    $('.artist_name').text(track.artists[0].name);            
    var cover = '<img src="' + track.album.images[0].url + '">';
    $('.cover_image').html(cover);
    var audio = '<audio class="js-player" src="' + track.preview_url + '">';
    $('.audio').html(audio);
    var more_results = '<br/><button type="submit" class="btn btn-primary" id="more_btn">Ver más Resultados</button>';
    $('.more_result').html(more_results);
};  
  function handle_Error () {
    console.error('¡¡ Ha Fallado !!');
  }
  request.done(Data_Songs);
  request.fail(handle_Error);
});

Answer 1

所以看起来你有按钮来触发事件......这是你的下一步：

1. 获取输入（例如通过文本字段）并通过 API 进行搜索。
2. 接下来，从 API 中获取解析后的 JSON。
3. 然后你就可以在你的 Data_Songs 函数中做你正在做的事情......

这是我的实现：

$('#song_btn').on('click', function(){
    var BASE_URL = 'https://api.spotify.com/v1/'
    var QUERY = $('#search_field').val(); // This is the value of your text field 

    var spotify_json = $.get(BASE_URL + 'search?type=track&query=' + QUERY, function(data){
        console.log(data.tracks); // Do whatever you want with them after here!
        // Ex. alert(data.tracks[0].href);
    })
})

请注意，我在$.get()方法上使用了成功处理程序，这与您的代码略有不同。

要在 $.get() 函数中使用您的 Data_Songs 函数，

var spotify_json = $.get(BASE_URL + 'search?type=track&query=' + QUERY, Data_Songs(data));