<!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. Codeforces 1101D 点分治

    题意:有一颗树,每个点有一个点权,边权都是1,问路径上的所有点的gcd不是1的最长路径是多少? 思路:之前补这道题的时候,用分解质因数 + 树形DP做的,其实用点分治可以更暴力一点.对于这类统计树上路 ...

  2. 13.volatile与synchronized比较

    synchronized,volatile都解决了共享变量 value 的内存可见性问题,但是前者是独占锁,同时只能有一个线程调用 get()方法,其他调用线程会被阻塞, 同时会存在线程上下文切换和线 ...

  3. mysql中limit 和 limit 与 offset 的用法（效果相同，用法不通过）

    例1,假设数据库表student存在13条数据. 代码示例: 语句1:select * from student limit 9,4 语句2:slect * from student limit 4 ...

  4. MariaDB PHP语法

    MariaDB与各种编程语言和框架(如PHP,C#,JavaScript,Ruby on Rails,Django等)合作良好. PHP仍然是所有可用语言中最受欢迎的语言,因为它的简单性和历史足迹. ...

  5. java html生成PDF，并打印

    import java.io.File; import java.io.FileOutputStream; import org.zefer.pd4ml.PD4Constants; import or ...

  6. hdu 3572 Task Schedule (Dinic模板)

    Problem Description Our geometry princess XMM has stoped her study in computational geometry to conc ...

  7. 洛谷P1122 最大子树和 （树状dp）

    题目描述 小明对数学饱有兴趣,并且是个勤奋好学的学生,总是在课后留在教室向老师请教一些问题.一天他早晨骑车去上课,路上见到一个老伯正在修剪花花草草,顿时想到了一个有关修剪花卉的问题.于是当日课后,小明 ...

  8. Database基础(七)：部署集群基础环境、MySQL-MMM架构部署、MySQL-MMM架构使用

    一.部署集群基础环境 目标: 本案例要求为MySQL集群准备基础环境,完成以下任务操作: 数据库授权 部署MySQL双主多从结构 配置本机hosts解析记录 方案: 使用4台RHEL 6虚拟机,如下图 ...

  9. ubuntu下安装apidoc

    1.到http://nodejs.cn/download/下载nodejs 可以复制链接 使用wget下载更加快速 选择对应的操作系统位数 下载到/usr/local/src 此处强烈不建议编译安装 ...

  10. SAS创建和使用索引（SAS INDEX)

    一.概述 在合并数据集的时候,可以使用DATA步,但使用DATA 步时需要对KEY VALUE 排序,且KEY VALUE 的名字也必须一致:也可以用PROC SQL ,不需要进行上述排序.重命名的步 ...