前端展示截图https://images.cnblogs.com/cnblogs_com/LiuFqiang/1429011/o_D09Q55)EL1VFEIJ(GKI%7D%7DY5.png

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">

        var date = "";

        $.ajax({

            url: "https://api.apiopen.top/musicRankings",  //接口地址

            type: "GET",   //请求方法

            ContentType: "aplication/json",  //返回数据类型

            success: function(response){  //请求成功回调函数

                if(response.code == 200){

                    console.log(response)

                    data = response.result;

                    var tr = "";

                    var listTr = "";

                    for(var i = 0; i < data.length; i++){

                        tr += "<tr><td><img class='title_pic' src=" + data[i].pic_s210 +" title='" + data[i].name+ "' onclick='listDetail("+i+")'></td><tr>"

                        var list = data[i].content;

                        for(var j=0; j < list.length; j++){

                            listTr += "<tr class='list_item'><td>" + parseInt(j+1) + "</td>"

                            listTr += "<td width='30px' class='top_icon'>&#8593</td>"

                            listTr += "<td width='10%'><img src=" + list[j].pic_small + "></td>"

                            listTr += "<td>" + list[j].title +"</td>"

                            listTr += "<td>" + list[j].author +"</td>"

                            listTr += "<td>" + list[j].album_title +"</td></tr>"

                        }

                    }

                }

                $("#music_menu").append(tr);

                $("#music_list").append(listTr)

            }

        })

        function listDetail(typeCode){

            var music_datail = "<div>"+data[typeCode].comment+"<img src='"+ data[typeCode].pic_s444+"''></div>"

            $("#music_list").html(music_datail)

        }

    </script>

    <style type="text/css">

        #box_content{width: 60%;margin: auto;}

        #box_left{width: 20%;float: left}

        #box_right{width: 80%;float:left;}

        .list_item{height: 70px;background: #fff;}

        .list_item img{width: 55px;height: 55px;}

        #music_menu img{width: 200px}

        .tb_bottom{height: 10px;background: red}

        #music_list tr td{border-bottom: 2px solid #eee;font-size: 0.9em}

        .top_icon {color:#db5800}

    </style>

</head>

<body>

    <div id="box_content">

        <div id="box_left">

            <table id="music_menu" border="0" cellpadding="0" cellspacing="0">

            </table>

            <img src="http://ubmcmm.baidustatic.com/media/v1/0f000FIDhoa4I7Cp3sJqZf.jpg" title="" alt="" border="0" height="220" width="150">

        </div>

        <div id="box_right">

            <div>

                <img src="http://d.yoyi.tv/plus/plus4/2019/11/21/1802350445257321.jpg">

            </div>

            <table id="music_list" >

                <tr><tH colspan="4">标题</tH><tH>歌手</tH><th>专辑</th></tr>

            </table>

        </div>

    </div>

</body>

</html>

Aajx调用千千音乐数据接口的更多相关文章

  1. Winform项目调用asp.net数据接口

    最近一个WPF项目需要改写成android项目,思路是在asp.net项目中编写一个通用接口,便于其它平台下调用数据.刚接触到这些东西的时候完全是一头雾水,最根本的原因是不明白网站中的一个网页,为什么 ...

  2. 横瓜先生如何用MDB和XLS等低性能数据库来处理千亿级数据量。

    横瓜先生如何用MDB和XLS等低性能数据库来处理千亿级数据量. 横瓜先生曾经用ACCESS做数据库,开发出高性能CMS来处理过TB级的文本数据量,任何请求都可以在10MS内完成,基本就是硬盘延迟的时间 ...

  3. 开放数据接口 API 简介与使用场景、调用方法

    此文章对开放数据接口 API 进行了功能介绍.使用场景介绍以及调用方法的说明,供用户在使用数据接口时参考之用. 在给大家分享的一系列软件开发视频课程中,以及在我们的社区微信群聊天中,都积极地鼓励大家开 ...

  4. ABAP 程序/接口调用其他程序的数据

    在ABAP遇到的业务场景中,可能会遇到一种情况,需要调用其他报表的数据来发送或者二次加工,这个时候又不想对源程序做大的改动.有以下几种思路解决. 1.修改源程序,将需要展示的数据存储到DB中,然后主程 ...

  5. Winform实现调用asp.net数据接口实例

    本文实例讲述了Winform实现调用asp.net数据接口的方法,分享给大家供大家参考.具体实现方法如下: 一.问题: 最近一个WPF项目需要改写成android项目,思路是在asp.net项目中编写 ...

  6. 【Android】利用安卓的数据接口、多媒体处理编写内存卡Mp3播放器app

    通过调用安卓的MediaPlayer能够直接完毕Mp3等主流音频的播放,同一时候利用ContentResolver与Cursor能够直接读取安卓内在数据库的信息.直接获取当前sdcard中全部音频的列 ...

  7. App开发：模拟服务器数据接口 - MockApi

    为了方便app开发过程中,不受服务器接口的限制,便于客户端功能的快速测试,可以在客户端实现一个模拟服务器数据接口的MockApi模块.本篇文章就尝试为使用gradle的android项目设计实现Moc ...

  8. 使用Asp.net WebAPI 快速构建后台数据接口

    现在的互联网应用,无论是web应用,还是移动APP,基本都需要实现非常多的数据访问接口.其实对一些轻应用来说Asp.net WebAPI是一个很快捷简单并且易于维护的后台数据接口框架.下面我们来快速构 ...

  9. 服务端提供的JSON数据接口与用户端接收解析JSON数据

    JSON格式的服务接口:http://www.cnblogs.com/visec479/articles/4118338.html 首先来了解下JSON格式解析 json结构的格式就是若干个 键/值( ...

随机推荐

  1. AtCoder Beginner Contest 130 F Minimum Bounding Box 三分法求极值（WA）

    题意:给n个点的起始坐标以及他们的行走方向,每一单位时间每个点往它的方向移动一单位.问最小能包围所有点的矩形. 解法:看到题目求极值,想了想好像可以用三分法求极值,虽然我也不能证明面积是个单峰函数. ...

  2. javax.net.ssl.SSLKeyException: RSA premaster secret error

    环境jdk1.7, 调用第三方接口时,出现javax.net.ssl.SSLKeyException: RSA premaster secret error错误,解决方案,将jre/lib/ext所有 ...

  3. Python3.5-20190506-廖老师-自我笔记函数

    函数就是将你的代码封装起来,可以重复利用.不需要每次就写重复的代码 def 函数名(位置参数,默认参数=10,可变参数,关键字参数): 代码块 return 值 定义函数时,需要确定函数名和参数个数: ...

  4. java的BigDecimal比较大小

    java的BigDecimal比较大小 //前提为a.b均不能为null if(a.compareTo(b) == -1){ System.out.println("a小于b"); ...

  5. array_shift — 将数组开头的单元移出数组

    <?php $stack = array("orange", "banana", "apple", "raspberry&q ...

  6. numpy.unique

    Find the unique elements of an array. Returns the sorted unique elements of an array. There are thre ...

  7. InnoDB事务之redo log工作原理

    Reference:https://time.geekbang.org/column/article/121710 InnoDB是一个事务性的存储引擎,而InnoDB的事务实现是基于事务日志redo ...

  8. 小程序推送消息（Template）

    最近搞小程序模拟推送消息,才发现小程序推送消息接口准备下线. 请注意,小程序模板消息接口将于2020年1月10日下线,开发者可使用订阅消息功能 咱们现在有需求,所以不管下不下,完成再说. 一:”获取a ...

  9. 前端工程师技能图谱skill-map

    # 前端工程师技能图谱 ## 浏览器 - IE6/7/8/9/10/11 (Trident) - Firefox (Gecko) - Chrome/Chromium (Blink) - Safari ...

  10. CentOS 安装MySQL5.7 源码方式安装

    MySQL rpm方式安装:https://www.cnblogs.com/deverz/p/9560403.html 1.卸载已经安装的MySQL yum list installed mysqlr ...