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

基于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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cpongo11

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值