jQuery+JSONP通过调用虾米接口实现类似点点网发布音乐的功能

点点网的音乐发布是通过搜索、选择实现的，原本以为是他们自己做的一个类似爬虫的东西去模拟虾米网的搜索功能，然后将搜索的结果返回到点点的界面，包括id、name、ablum、artist等，然后去调用显示相关的widget实现音乐的播放，但后来研究了下，发现其实际上是调用了这个接口：

http://kuang.xiami.com/app/nineteen/search/key/歌曲名称/diandian/1/page/

歌曲当前页?_=当前毫秒&callback=getXiamiData

通过这个接口返回所需的所有以json格式封装的函数，网上搜集了下相关资源，现将实现方法和代码整理如下：

该接口返回的是一个getXiamiData(json数据)的回调函数 其中的json如图（部分显示，不完整）:

我们可以看到我们所查的音乐位于/results数组里

song_id 就是音乐的ID

song_name就是音乐名称

artist_name就是艺术家（演唱者）的姓名

ablum_name是专辑名称

album_logo就是专辑图片

等等

思路:

1.做一个搜索框并且绑定其搜索按钮的click事件；

2.然后就是去解析返回的jsonp（关于jsonp，详见这篇文章）；

3.获取到前面的song_id,song_name等参数后，把这些参数值赋到li元素相应的位置上，然后点击li元素时，调用指定的函数拼接播放器代码并显示到相应的div中。

代码：

html代码：

搜索

js代码：

/*

* @author:农夫庄园

* website:

* url:/p/4347.html

*/

效果图：

下载代码：百度云盘

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。