Spotify Api結果Ajax

-1

在圖像中我有代碼只顯示第一個元素（歌曲，圖像，藝術家等...）。我想知道如何讓它告訴我：Spotify Api結果Ajax

當用戶點擊該按鈕時，顯示出一個新的模式與所有結果軌道的搜索您以前執行。
當用戶點擊其中一個曲目名稱時，使用來更新播放器，包括其音頻。

該按鈕已創建。

$('#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); 
});

來源

2016-04-26 PV87

請添加代碼作爲文本而不是作爲一個圖像鏈接。看看[MVC]（http://stackoverflow.com/help/mcve） –

你已經擁有了它;） – PV87

所以好像你有按鈕觸發事件......這裏是您的下一個步驟：

以（通過例如文本字段）的輸入，並通過搜索它API。
接下來，從API獲取解析的JSON。
然後你就可以做你在你的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()方法的成功處理程序，這與你的代碼有點不同。

要使用Data_Songs功能在$獲得（）函數，

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

來源

2016-04-26 18:37:43

Spotify Api結果Ajax

回答

相關問題