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

思路:

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>