跟蹤搜索Last.fm JSON API與jQuery AJAX

我試圖重新發明Last.FM的軌道搜索，但在我的網站上，並使用jQuery和AJAX。所以我的想法是通過Last.FM的JSON API獲取數據並傳遞文本輸入元素數據。例如 - 用戶將放入「滾石馬」並點擊提交。 jQuery將「滾石馬」傳遞到字符串http://ws.audioscrobbler.com/2.0/?method=track.search&track=Rolling%20Stones%20Horses&api_key=b25b959554ed76058ac220b7b2e0a026&format=json&callback=？然後，它會吐出成果轉化爲HTML作爲跟蹤搜索Last.fm JSON API與jQuery AJAX

<P> ARTIST NAME - TRACK </P>

我試圖拼湊如何搜索表單，AJAX和的getJSON共同努力。這是我到目前爲止：

<body> 
    <form action="/wphmusic/" id="searchForm"> 
    <input type="text" name="s" placeholder="Search..." /> 
    <input type="submit" value="Search" /> 
    </form> 

    <div id="result"></div> 

<script type="text/javascript"> 

$("#searchForm").submit(function(event) { 

event.preventDefault(); 

var $form = $(this), 
    term = $form.find('input[name="s"]').val(), 
    url = $form.attr('action'); 
}); 

var fmurl = 'http://ws.audioscrobbler.com/2.0/?method=track.search&track=' + url + '&api_key=b25b959554ed76058ac220b7b2e0a026&format=json&callback=?'; 
$.getJSON(fmurl, function(data) { 
    var html = ''; 
    $.each(data.results.trackmatches.track, function(i, item) { 
     html += "<p>" + item.name + " - " + item.artist + "</p>"; 
}); 
    $('#result').append(html); 

</script> 
</body>

超級新手在這裏！

來源

2012-02-02 Besto

這應該工作，雖然它看起來像我在你的getJSON調用中缺少一個括號。

來源

2012-08-01 00:26:58 Zach

你也應該使用諸如encodeURIComponent（）之類的東西來編碼你傳遞給url字符串的數據。 – Zach 2012-08-01 19:28:42

跟蹤搜索Last.fm JSON API與jQuery AJAX

回答

相關問題