jQuery+JSONP通过调用虾米接口实践

来自@php新手 的一篇文章:jQuery+JSONP通过调用虾米接口实现类似点点网发布音乐的功能。通过接口返回所需的所有以json格式封装的函数,网上搜集了下相关资源,现将实现方法和代码整理如下:

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

http://kuang.xiami.com/app/nineteen/search/key/歌曲名称/diandian/1/page/
歌曲当前页?_=当前毫秒&callback=getXiamiData

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

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

a5b7fbcc72c54fe2a70d0aeedda126702

我们可以看到我们所查的音乐位于/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代码:

<input type="text" id="search_input"/><button onclick="searchMusicList(1);">搜索</button>
<div class="song_list">
    <ul style="list-style: none;"></ul>
</div>
<div class="song_div"></div>

js代码:

/*
 * @author:农夫庄园
 * website:
 * url:/p/4347.html 
 */

<script type="text/javascript">

function getTheSong(obj) {
    $(".song_div").html('<embed src="http://www.xiami.com/widget/470304_' +
        $(obj).attr("id") + '/singlePlayer.swf" 
        type="application/x-shockwave-flash" 
        width="257" height="33" wmode="transparent"></embed>');
}

function searchMusicList(Page) {
    $.ajax({
        type: "get",
        async: false,
        url: "http://kuang.xiami.com/app/nineteen/search/key/"
            + encodeURIComponent($("#search_input").val())
            + "/diandian/1/page/" + Page + "?_=" + new Date().getTime(),
        dataType: "jsonp",
        jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
        jsonpCallback: "getXiamiData", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
        success: function(data) {
            $.each(data.results, function(idx, item) {
               if (idx === 0) {
                   return true;//同countinue,返回false同break
               }
               //歌曲id
               var song_id = item.song_id;
               //歌曲名称
               var song_name = item.song_name;
               //专辑名称
               var ablum_name = item.ablum_name;
               //专辑封面
               var album_logo = item.album_logo;
               //演唱者
               var artist_name = item.artist_name;

               $(".song_list ul").append("<li class='song_li' id='" + song_id + "'
                   onclick='getTheSong(this);'>" +
                   decodeURIComponent(song_name) + " - " +
                   decodeURIComponent(artist_name) + "</li>");

            });
        },
        error: function() {
            alert('fail');
        }
    });
}
</script>

效果图:

349e770f39ae806f57d429e25d00fd983

下载代码:百度云盘


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流