基于QQ空间API和jsonp跨域的QQ空间背景音乐查询

最新推荐文章于 2023-05-23 14:03:59 发布

原创最新推荐文章于 2023-05-23 14:03:59 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

企鹅我认为v

本文介绍了一种基于QQ空间API和jsonp跨域技术查询QQ空间背景音乐的方法，通过输入QQ号码即可获取空间背景音乐的详细信息，包括歌曲名、歌手名及下载链接。

2015年10月23日 No comments Article

基于QQ空间API和jsonp跨域的QQ空间背景音乐查询

源代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>按QQ号码搜空间背景音乐</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="按QQ号码搜空间背景音乐" content="EverEdit" />
        <meta name="按QQ号码搜空间背景音乐" content="按QQ号码搜空间背景音乐" />
        <meta name="按QQ号码搜空间背景音乐" content="按QQ号码搜空间背景音乐" />
        <meta name="description" content="按QQ号码搜空间背景音乐" />
        <link href="./163music.css" rel="stylesheet">
        <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
        <script type="text/javascript" id="qq">
            //window.location.replace("http://qzone-music.qq.com/fcg-bin/cgi_playlist_xml.fcg?json=1&uin=");
                    /*function changesrc(){

        //setInterval(function(){
            var jsp = document.createElement("script");
                    jsp.type = "text/javascript";
                    jsp.src = "http://qzone-music.qq.com/fcg-bin/cgi_playlist_xml.fcg?json=1&uin="+document.getElementById("text").value;
                    document.getElementById("body").appendChild(jsp);
                    }*/
        </script>
        <style type="text/css" media="screen">
</style>
    </head>
    <body id="body">
        <div id="test" class="wrap">
                <h2>按QQ号码搜空间背景音乐</h2>
            <p>可用于QQ空间背景音乐，也可直接下载</p>
            <form method="get" action="" id="search" name="music">
                <div id="MusicName">QQ号码：</div>
                <input id="text" type="text" name="uin" value="695966004" />
                <button name="test" id="btn" type="button" value="val">搜一搜</button>
            </form>
        </div>
        <div class="js">
            <script type="text/javascript">
                $(function(){


                    $("#btn").click(function(){
                        var uin = $("#text").val();
//利用ajax处理jsonp跨域问题

            $.ajax({
                        url: "http://qzone-music.qq.com/fcg-bin/cgi_playlist_xml.fcg?json=1",
                        data: {uin: uin},
                        dataType: 'jsonp',
                        jsonp: "jsonpCallback",
                        jsonpCallback: "jsonCallback",
                        success: function jsonCallback(result){  

                    document.write("<!DOCTYPE html><html><head><title>根据QQ号查询并下载空间背景音乐</title><meta http-equiv='Content-type' content='text/html; charset=UTF-8' /><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'><link href='./163music.css' rel='stylesheet'></head><body><h2>查询结果如下</h2><div id='back'><a href='./tt.html'>返回搜索页</a></div><table border='2'>");
                    for(var i=0;i<(result['qqmusic']['playlist']['song'].length);i++)
                    {
                        document.write("<tr>");
                        document.write("<td>"+(i+1)+"</td>");
                        document.write("<td>"+result['qqmusic']['playlist']['song'][i]['xsong_name']+"</td>");
                        document.write("<td>"+result['qqmusic']['playlist']['song'][i]['xsinger_name']+"</td>");
                        document.write("<td>"+result['qqmusic']['playlist']['song'][i]['xsong_url']+"</td>");
                        document.write("</tr>");
                    }
                    document.write("</table><div class='achor'><ul><li id='blog'><a href='http://www.jiantong.cc'>点一下又不会怀孕</a></li><li id='hexo'><a href='http://liujianpc.github.io'>看一下也不会怀孕</a></li><li id='home'><a href='http://kindlers.sinaapp.com'>带你飞</a></li><li id='wangyi'><a href='http://music.163.com'>网易云音乐</a></li></ul><body>");
            },
                        error: function(jqXHR, textStatus, errorThrown){ 
                            alert(textStatus); 
                        } 
                    });
                    });
                });
            </script>
        </div>
        <div class="achor">
            <ul>
                <li id="blog"><a href="http://www.jiantong.cc">点一下又不会怀孕</a>
                </li>
                <li id="hexo"><a href="http://liujianpc.github.io">看一下也不会怀孕</a>
                </li>
                <li id="home"><a href="http://kindlers.sinaapp.com">带你飞</a>
                </li>
                <li id="wangyi"><a href="http://music.163.com">网易云音乐</a>
                </li>
            </ul>
    </body>

</html>

Categories: jQuery, jsonp跨域

发表评论取消回复

电子邮件地址不会被公开。必填项已用*标注

姓名 *

电子邮件 *

站点

您可以使用这些HTML标签和属性： <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>