前端展示截图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. 将word文档中的回车符进行删除

  2. 2019牛客暑期多校训练营（第九场）A.The power of Fibonacci

    题意:给出n和m,f(n)是斐波那契额数列的第n项,要求计算ans=f(1)^m+f(2)^m+....f(n)^m.即斐波那契额数列前n项的m次幂和. 解法:这题好像有两种解法:一种是循环节+CRT ...

  3. Nginx是什么？为什么选择Nginx做服务器软件？有什么优势？

    代理服务器基础知识 Nginx是什么? 为什么选择Nginx 1.代理服务器基础知识 a.代理服务器 一般是指局域网内部的机器通过代理服务器发送请求到互联网上的服务器,代理服务器一般作用在客户端.应用 ...

  4. C语言集成开发环境使用小记

    时隔6年,我又重操C语言,是什么让我如此再下定决心?就是不想让自己所学过的知识就此荒废了,我重新以一个C语言初学者的身份(当然,稍稍有点基础,以前的知识忘得没这么快^_^)温故C语言,学习了几天,果真 ...

  5. jsp中$使用不了

    导入了jstl <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>为啥 ...

  6. centos7.5部署ELk

    第1章 环境规划 1.1 ELK介绍       ELK是ElasticSerach.Logstash.Kibana三款产品名称的首字母集合,用于日志的搜集和搜索.      Elasticsearc ...

  7. python pymouse用法记录

    from pymouse import PyMouse m = PyMouse() m.position()#获取当前坐标的位置 m.move(x,y)#鼠标移动到xy位置 m.click(x,y)# ...

  8. HTML-参考手册: HTML 事件属性

    ylbtech-HTML-参考手册: HTML 事件属性 1.返回顶部 1. HTML 事件属性 全局事件属性 HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为,比方说当用户点击某 ...

  9. Openstack组件部署 — 将一个自定义 Service 添加到 Keystone

    目录 目录 Keystone 认证流程 让 Keystone 为一个新的项目 Service 提供验证功能 最后 Keystone 认证流程 User 使用凭证(username/password) ...

  10. Single Page Application

    single page web application,SPA,就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序.   单页Web应用(si ...