来自@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如图（部分显示，不完整）:

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

song_id 就是音乐的IDsong_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>

效果图：

下载代码：百度云盘