前端展示截图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. 转：几款免费的图表js插件

    1,ichartjs(国产)(http://www.ichartjs.com/)  ===============强烈推荐ichartjs是一款优秀的国产开源插件,作者是王鹤,英文名taylor,毕业 ...

  2. vue 改变某个页面的背景色

    beforeCreate(){ // 添加背景色 document.querySelector('body').setAttribute('style', 'background-color:#fff ...

  3. openssl部分解读

    前言 openssl是个开源的加密库.可以对文件进行加密解密. 小知识 术语: 单词:   Encryption  加密   Decryption   解密   ssl 安全socket层 tsl 最 ...

  4. Android面向切面编程（AOP）（转）

    转自:https://www.jianshu.com/p/aa1112dbebc7 一.简述 1.AOP的概念 如果你用java做过后台开发,那么你一定知道AOP这个概念.如果不知道也无妨,套用百度百 ...

  5. 【串线篇】面向切面编程AOP

    面向切面编程AOP 描述:将某段代码“动态”的切入到“指定方法”的“指定位置”进行运行的一种编程方式 (其底层就是Java的动态代理)spring对其做了简化书写 场景: 1).AOP加日志保存到数据 ...

  6. Vim默认开启语法标识功能

    把syntax on加到$HOME/.vimrc文件中.

  7. go（一）基础知识

    一.第一个程序 基本程序结构 package main // 包 import "fmt" // 引入依赖代码 // 功能实现 func main() { fmt.Println( ...

  8. NFA 、DFA 简述

    转载请注明出处 https://www.cnblogs.com/majianming/p/11823697.html 目前常见的正则表达引擎总体分为2种,DFA (确定型有穷状态自动机) 和 NFA ...

  9. Nginx在Windows平台的配置

    Nginx在Windows平台的配置 能够使用Nginx搭建Tomcat集群,并完成负载均衡. 1.什么是Nginx 2.为什么使用Nginx 背景: 互联网飞速发展的今天,大用户量高并发已经成为互联 ...

  10. 【react】---redux-actions的基本使用---【巷子】

    一.安装 cnpm install --save redux-actions 二.为什么使用 redux-actions reducer使用switch case语句进行action类型判断,当act ...