前端展示截图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. wxss 优先级

    外部元素>内部元素>id选择器>class  选择器>元素选择器

  2. jsp获取url路径的方法

    如果你请求的URL是  http://localhost:8080/demo/Index.jsp request.getScheme() //输出:http request.getServerName ...

  3. C++ 浅谈 strlen 与 sizeof的区别

    先举个栗子: 字符串数组跟字符串指针,然后分别使用sizeof跟strlen看输出结果. char strA[] = "2017-7-19"; char *strB = " ...

  4. postgres服务相关语法

    远程登陆 psql -h 主机 -U 用户 -p端口 -W -d 数据库 #-W表示密码,例如:psql -h 192.168.137.3 -U postgres -p 5432 -W -d post ...

  5. 【leetcode】983. Minimum Cost For Tickets

    题目如下: In a country popular for train travel, you have planned some train travelling one year in adva ...

  6. 项目部署错误 HTTP Error 500.19 - Internal Server Error

    HTTP Error 500.19 - Internal Server Error配置错误: 不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定是默认设置的 (overrid ...

  7. vue基础六

    列表渲染 1.v-for 我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要以 item in items 形式的特殊语法(也可以用of代替in), items是源数据数组 ...

  8. tomcat 高并发

    转自 http://blog.csdn.net/feng27156/article/details/19420695 一.容器简化了程序员自身的多线程编程. 各种Web容器,如Tomcat,Resio ...

  9. python re模块常用的正则表达式

    '.'     默认匹配除\n之外的任意一个字符,若指定flag DOTALL,则匹配任意字符,包括换行 '^'     匹配字符开头,若指定flags MULTILINE,这种也可以匹配上(r&qu ...

  10. 如何在原生Android项目里嵌入Cordova

    背景: 这段时间在维护一个Cordova混合项目,以前稍微接触过Cordova,也写过简单的纯纯的Cordova的Demo,但是没有尝试过混合原生的Cordova. 在接到项目后比较了一下项目架构和C ...