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'>↑</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>