使用 jQuery AJAX 跟踪搜索 Last.fm JSON API答案

【问题标题】：Track search Last.fm JSON API with jQuery AJAX使用 jQuery AJAX 跟踪搜索 Last.fm JSON API
【发布时间】：2012-02-25 13:50:36
【问题描述】：

我正在尝试重新发明 Last.FM 的曲目搜索，但在我的网站上并使用 jQuery 和 AJAX。所以我的想法是通过 Last.FM 的 JSON API 获取数据并传递文本输入元素数据。例如——用户输入“Rolling Stones Horses”并点击提交。 jQuery 会将“Rolling Stones Horses”传递到字符串http://ws.audioscrobbler.com/2.0/?method=track.search&track=Rolling%20Stones%20Horses&api_key=b25b959554ed76058ac220b7b2e0a026&format=json&callback= 中吗？然后它会将结果以

的形式输出到 HTML 中

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

这里是超级新手！

【问题讨论】：

标签： jquery ajax json last.fm

【解决方案1】：

这应该可行，尽管在我看来您的 getJSON 调用中缺少一个括号。

【讨论】：

您还应该使用类似 encodeURIComponent() 的方法将要传递的数据编码到 url 字符串中。