跟踪搜索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

回答

相关问题