前端展示截图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. Sass--嵌套选择器

    Sass 中还提供了选择器嵌套功能,但这也并不意味着你在 Sass 中的嵌套是无节制的,因为你嵌套的层级越深,编译出来的 CSS 代码的选择器层级将越深,这往往是大家不愿意看到的一点.这个特性现在正被 ...

  2. python 字符串中替换字符

    今天本来打算写个程序,替换字符串中固定的一个字符:将<全部替换成回车'\n' 于是,我写成这样 s='sdjj<ddd<denj,>' for x in s: if x=='& ...

  3. shell中的空格【转载】

    1.定义变量时, =号的两边不可以留空格. eg: gender=femal————right gender =femal———–wrong gender= femal———–wrong gender ...

  4. Android中软键盘弹出时关于布局的问题

     当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncre ...

  5. Python基础教程（008）--第一个Python程序

    前言: 学会第一个Python程序 了解Python2和Python3的区别 内容 执行Python程序的三种方式 解释器--Python.Python3 交互式-- ipthon 集成开发环境--P ...

  6. 10个优秀的 Web UI库/框架

    UI(User Interface)即用户界面,也称人机界面.是指用户和某些系统进行交互方法的集合,实现信息的内部形式与人类可以接受形式之间的转换.本文为WUI用户整理了10个优秀的 Web UI 库 ...

  7. （转）Spring Boot干货系列：（三）启动原理解析

    转:http://tengj.top/2017/03/09/springboot3/ 前言 前面几章我们见识了SpringBoot为我们做的自动配置,确实方便快捷,但是对于新手来说,如果不大懂Spri ...

  8. 《ArcGIS Runtime SDK for .NET开发笔记》 --Hello Word

    这里我们将创建第一个用于显示地图的APP. 1.新建一个WPF程序 首先我们打开Visual Studio,选择新建项目. 选择已安装——模板——Windows桌面——WPF应用程序  2.添加Run ...

  9. Redis入门很简单之三【常见参数配置】

    Redis入门很简单之三[常见参数配置] 博客分类: NoSQL/Redis/MongoDB redisnosql缓存中间件memcached  Redis的一下常见设置都是通过对redis.conf ...

  10. python笔试做错的题目

    a = [1,2,3] b = a print(id(a),id(b),a == b) print(a,b) b = b + [1,2,3] print(a,b) print(id(a),id(b), ...