<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

     </body>

     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

     <script>

         $(function(){

             //从 url中 获取 id

             var id;

             var reg = new RegExp("(^|&)id=([^&]*)(&|$)");

             var r = window.location.search.substr(1).match(reg);

             if(r&&r.length>2){

                 id = unescape(r[2]);

             }

             console.log(id);

             //获取歌曲信息ID

             var data = getSongInfo(id);

             //获取歌曲信息

                function getSongInfo(id){

                 $.ajax({

                     url:"http://www.andyan.cn/hiphop/hiphop/getSong",

                     dataType:"json",

                     type:"post",

                     data:{

                         id:id,

                         songName: "songName",

                         author: "author",

                         lyric: "lyric",

                         audioFilePath:""  //歌曲保存的路径

                     },

                     success:function(data){

                         console.log(JSON.stringify(data));

                         console.log(data);

                         console.log(data.data.lyric)

                         //歌词

                         var lyricHtml = "";

                         var str = data.data.lyric.replace(/n/g, "");

                         console.log(str)

                         var strNew = str.replace(/\\/g, " ");

                         console.log(strNew)

                         var arr = strNew.split(" ");

                         console.log(arr);

                         $("#tickerContainer").append(`<audio id="music" class="audio"  src="${data.data.audioFilePath}">你的浏览器不支持audio标签。</audio>`)

                         var tickerHtml = ''

                         for(var i = 0; i<arr.length; i++){

                             var item = arr[i];

                             console.log(item);

                             tickerHtml += `<li>${item}</li>`

                         }

                         document.querySelector('#ticker').innerHTML = tickerHtml;    

                         //作者

                         var authorHtml = "";

                         authorHtml = `<li>歌曲名称</li>

                                     <li>${data.data.songName}</li>

                                     <li>作词</li>

                                     <li>${data.data.author}</li>

                                     <li>作曲</li>

                                     <li>${data.data.author}</li>`

                         document.querySelector('.authorName').innerHTML = authorHtml;    

                         return data;

                     }

                 })

             }

         })

     </script>

 </html>

在url里请求id的更多相关文章

  1. restful风格url Get请求查询所有和根据id查询的合并成一个controller

    restful风格url Get请求查询所有和根据id查询的合并成一个controller的方法 原代码 // 127.0.0.1:8080/dep/s @ApiOperation(value=&qu ...

  2. 伪命题:PHP识别url重写请求

    手上有一个网站,然后启用了伪静态,因为一些设置上的原因,一段时间后,发现收录的都是.php的文件,而启用的伪静态地址则收录很少,在更改设置后,想尽快去掉.php的收录,然后想将.php的地址转向.ht ...

  3. Ocelot中文文档-请求Id和关联Id

    Ocelot支持一个客户端以头的形式发送requestid. 如果设置了,一旦中间件管道中可用,Ocelot便会使用这个requestid进行日志记录. Ocelot也会使用指定头将requireid ...

  4. zencart分类页产品页去掉url中的id号

    最近公司新上的网站被seo指出要修改url,去掉url中产品id.由于我们用的是zencart框架,装了 Ultimate SEO URLs 插件,所以在网上应该有这方面的资料,本文主要参考资料: 原 ...

  5. jquery的一个小扩展,读取URL里的参数

    /* *扩展jquery的功能: *读取url中参数的功能,方法的参数是要获取的URL里键; *使用前要先导入jquery.js文件. * */ (function ($) { $.getUrlPar ...

  6. 【通信】Jave代码中生成url http请求

    /** * 向指定 URL 发送POST方法的请求 * * @param url * 发送请求的 URL * @param param * 请求参数,请求参数应该是 name1=value1& ...

  7. 从url到请求 再到页面生成

    百度面试 从url到请求 再到页面生成 - MartinDing - 博客园 https://www.cnblogs.com/martinding/p/7458723.html

  8. android 异步线程刷新UI 以及 JSON解析 以及 url get请求

    import android.os.Handler; import android.os.Message; 1. Handler mHandler = new Handler() { @Overrid ...

  9. this.$refs.tabs.activeKey ref就是vue里面的id

    this.$refs.tabs.activeKey ref就是vue里面的id

随机推荐

  1. java集合类笔试选择题整理含答案

    1.ArrayList list=new ArrayList(20);中的list扩充几次()A. 0B. 1C. 2D. 3答案:A分析:已经指定了长度, 所以不扩容 2.List.Set.Map哪 ...

  2. 使用 jQuery 实现当前页面高亮显示的通栏导航条

    index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  3. Day One-Python基础

    Python第一节 安装教程就不发了,太心累了!大家可以上百度查,网上都会有 python种类 JavaPython cPython pypy 两种编码  字节码 和 机器码 unicode utf8 ...

  4. sql的分页

    public static string GetPageSql(string sql, int start, int end)        {            return string.Fo ...

  5. 洛谷 P1271 聚会的快乐（树状dp）

    题目描述 你要组织一个由你公司的人参加的聚会.你希望聚会非常愉快,尽可能多地找些有趣的热闹.但是劝你不要同时邀请某个人和他的上司,因为这可能带来争吵.给定N个人(姓名,他幽默的系数,以及他上司的名字) ...

  6. jq实现跟随鼠标点击移动的下划线效果

    效果如下: 1.html代码: <div class="center-left-tap"> <a href="javascript:void (0)&q ...

  7. ThinkPHP示例：图片上传

    ThinkPHP示例之图片上传,包括图片上传.数据库保存.缩略图生成以及图片水印功能演示.首先需要下载框架核心,然后把示例解压到Web根目录下面,并修改入口文件中的框架入口文件的位置.导入示例目录下面 ...

  8. python 网络编程：socket（二）

    上节地址:Python网络编程:socket 一.send和sendall区别 send,sendall         ret = send('safagsgdsegsdgew') #send 发送 ...

  9. html{-webkit-text-size-adjust:none;}（取消浏览器最小字体限制）

    2016年10月13日 09:31:58 ITzhongzi 阅读数 9409   1.当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 ht ...

  10. 20175203 2018-2019-2《Java程序设计》第五周学习总结

    20175203 2018-2019-2<Java程序设计>第五周学习总结 第六章:接口与实现 本周学习了<Java程序设计>第六章的内容:接口与实现,以下为本周学习总结. 知 ...