在url里请求id 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8     </body>
 9     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
10     <script>
11         $(function(){
12             //从 url中 获取 id 
13             var id;
14             var reg = new RegExp("(^|&)id=([^&]*)(&|$)");
15             var r = window.location.search.substr(1).match(reg);
16             if(r&&r.length>2){
17                 id = unescape(r[2]);
18             }
19             console.log(id);
20             
21             //获取歌曲信息ID
22             var data = getSongInfo(id);
23             
24             
25             //获取歌曲信息
26                function getSongInfo(id){
27                 $.ajax({
28                     url:"http://www.andyan.cn/hiphop/hiphop/getSong",
29                     dataType:"json",
30                     type:"post",
31                     data:{
32                         id:id,
33                         songName: "songName",
34                         author: "author",
35                         lyric: "lyric",
36                         audioFilePath:""  //歌曲保存的路径
37                     },
38                     success:function(data){
39                         console.log(JSON.stringify(data));
40                         console.log(data);
41                         console.log(data.data.lyric)
42                         
43                         //歌词
44                         var lyricHtml = "";                    
45                         var str = data.data.lyric.replace(/n/g, "");
46                         console.log(str)
47                         var strNew = str.replace(/\\/g, " ");
48                         console.log(strNew)
49                         var arr = strNew.split(" ");
50                         console.log(arr);
51         
52                         $("#tickerContainer").append(`<audio id="music" class="audio"  src="${data.data.audioFilePath}">你的浏览器不支持audio标签。</audio>`)
53                         var tickerHtml = ''
54                         for(var i = 0; i<arr.length; i++){
55                             var item = arr[i];
56                             console.log(item);
57                             tickerHtml += `<li>${item}</li>` 
58                         }
59         
60         
61                         document.querySelector('#ticker').innerHTML = tickerHtml;    
62                         
63                         //作者
64                         var authorHtml = "";
65                         authorHtml = `<li>歌曲名称</li>
66                                     <li>${data.data.songName}</li>
67                                     <li>作词</li>
68                                     <li>${data.data.author}</li>
69                                     <li>作曲</li>
70                                     <li>${data.data.author}</li>`
71                         document.querySelector('.authorName').innerHTML = authorHtml;    
72                 
73                         return data;
74                     }
75                     
76         
77                 })
78             }
79         })
80         
81         
82     </script>
83 
84 
85 </html>

 

posted @ 2017-09-04 09:22  铜镜123  阅读(471)  评论(0)    收藏  举报