<!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. tomcat如何正确的开启远程调试功能（转）

    转自:http://blog.csdn.net/mhmyqn/article/details/49209541 版权声明:本文为博主原创文章,未经博主允许不得转载. 在日常开发中,有时需要对远程服务器 ...

  2. 使用canvas时, 如何用相对单位(rem, rpx)来适配不同机型

    使用canvas的api时, 使用的都是绝对数值, 如: 方法传参是坐标位置,不带单位,如ctx.translate(10,10); 那么此时, 我就需要将rem或rpx 转换成 px; 首先, 获取 ...

  3. Elasticsearch 分布式文档存储

    shard = hash(routing) % number_of_primary_shards决定文档在哪个分片上,routing 是一个可变值,默认是文档的 _id ,也可以设置成一个自定义的值. ...

  4. 【串线篇】SQL映射文件EmployeeDao.xml事项

    Dao.xml或者说是mapper.xml一个意思 id:方法名,相当于这个配置是对于某个方法的实现 ,参数类型不用写,()也不用写 resultType:指定方法运行后的返回值类型全类名:(查询操作 ...

  5. 使用jxls导出Excel报表

    导入jar包: <dependency> <groupId>net.sf.jxls</groupId> <artifactId>jxls-core< ...

  6. testNG 并发测试

     invocationCount是并发数,threadPoolSize是线程数,当线程是1的时候就是依次执行n次,当线程是并发次数时,就是同时执行n次    @Test public void abc ...

  7. Java：新建数组

    Array Initialization int[] a; = int a[]; int[] a = new int[100]; a[]的值会被初始化为0 `int[] smallPrimes = { ...

  8. linux（一）vi和vim

    vi 多模式文本编辑器 多模式产生的原因 四种模式 正常模式 插入模式 命令模式 可视模式 vi man vi vim vim正常模式 直接vim回车,或vim空格文件名回车 i进入插入模式 I(sh ...

  9. flask中app.py: error: invalid choice: 'insert'........的问题

    在flask中,分为两种操作方式,url指向函数或者终端指向函数,最终目的就是让函数执行,触发方式不同.终端执行更加安全, 另外如果在终端执行的时候出现 : 就是说明 insert 没有在@ mana ...

  10. djanjo中url路由匹配规则是啥意思

    一,django路由匹配规则的本质是通过正则表达式对用户的url进行匹配. 1,r 是正则表达式中防止转义的符号,例如在python/n代表换行,加上r就不换行了. 2,$ 正则表达式中表示以什么什么 ...