Aajx调用千千音乐数据接口

前端展示截图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>

相关阅读:
基于微信小程序的票价和时间选择以及计算总价
 基于Echarts的股票K线图展示
 基于Echarts的中国地图数据展示
 微信公众号网页授权登录获取用户基本信息
 springboot+mybatis+maven角色权限框架
 java服务端微信小程序支付
 推理 —— 猜帽子颜色
 Java 容器的使用及数组、List、Set 的相互转换
 构建工具 —— Groovy 与 Gradle
效率生产力工具 —— idea 插件
原文地址：https://www.cnblogs.com/LiuFqiang/p/11953236.html