Поиск треков Last.fm API JSON с jQuery AJAX

Я пытаюсь заново изобрести поиск трека Last.FM, но на моем сайте и с помощью jQuery и AJAX. Поэтому моя идея состоит в том, чтобы передать данные через JSON API Last.FM и передать данные элемента ввода текста. Например, пользователь добавит «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, какПоиск треков Last.fm API JSON с 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>

Super newb здесь!

источник

2012-02-02 Besto

Это должно сработать, хотя мне кажется, что в вашем вызове getJSON отсутствует скобка.

источник

2012-08-01 00:26:58 Zach

Вы также должны кодировать данные, которые вы передаете в строку url, используя что-то вроде encodeURIComponent(). – Zach

ответ

Смежные вопросы