ajax连接网易云音乐api接口,并实现在页面展示搜索结果与试听
因为网易云音乐搜索与听歌是两个接口,所以需要用到两次ajax,并且听歌接口需要在搜索接口请求成功以后再触发;
搜索音乐:<input type="text" id="search"> <input type="button" value="搜索" id="btn">
<ul id="list">
<li></li>  <a href=""></a><br>
<li></li>  <a href=""></a><br>
<li></li>  <a href=""></a><br>
<li></li>  <a href=""></a><br>
<li></li>  <a href=""></a><br>
<li></li>  <a href=""></a><br>
<li></li>  <a href=""></a><br>
<li></li>  <a href=""></a><br>
<li></li>  <a href=""></a><br>
<li></li>  <a href=""></a><br>
</ul>
<button id="lis">下一页</button>
JavaScript
$(function () {
$('#btn').click(function () {
$search = $('#search').val();
console.log($search);
var api = 'http://music.eleuu.com/search?keywords=' + $search + '';
console.log(api);
$.ajax({
type: 'get',
url: api,
dataType: 'json',
success: function (result) {
$res = result.result.songs;
console.log($res);
$.each($res, function (index, value) {
console.log(index);
console.log(value);
$('#list li').eq(index).html(value.name);
$('#list a').eq(index).html('试听一下').attr('name', value.id);
});
$.ajax({
type: 'get',
url: 'http://music.eleuu.com/song/url?id=' + $('#list a').attr('name') + '',
dataType: 'json',
success: function (res) {
var listen = res.data;
$.each(listen, function (index, value) {
console.log(value.url);
console.log($('#list a').attr(''));
$('#list a').attr('href', value.url)
})
}
})
}
})
})
})
先获取用户在输入框输入的内容,然后将内容传入api接口,当用户点击搜索按钮时就能获取到结果,并将搜索歌曲id储存为a标签的name里面;在搜索成功后再建立一个ajax接口,将a标签name属性的数据获取赋予听歌接口,然后再获取该接口数据中的url接口,以实现用户点击试听就可以获取到对应歌曲的播放链接。
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果