<!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. HDU-5072 补集转化+容斥原理

    题意:给n个数,求满足一下条件的三元组(a,b,c)数量:a,b,c两两互质或者a,b,c两两不互质. 解法:这道题非常巧妙地运用补集转化和容斥原理.首先我们令这n个数为n个点,然后两两之间连边如果是 ...

  2. 强大的性能监控pidstat

    前言 pidstat 可以监控单个任务.比如CPU.内存.IO.上下文切换.详细参考 man pidstat 安装 yum install sysstat 使用 1.监控所有活动进程 pidstat ...

  3. SVN连接不上仓库，问题之一

    如果之前用过SVN,在新的地址上用,发现一直连不上,报错.有可能是因为默认使用了之前的地址,所以没弹出输账号和密码的弹框. 解决方法就是:把之前的链接地址全部清除掉. 右键找到SVN里面的  Sett ...

  4. typedef 函数指针的使用（含例子）

    C代码   //#include<iostream.h>   #include<stdio.h>      typedef int (*FP_CALC)(int, int);  ...

  5. Spring开发总结

    自动装载配置开启: spring.factories内容: org.springframework.boot.autoconfigure.EnableAutoConfiguration=\ com.b ...

  6. sql中的(case when then else end )的用法（相当于java中的if else）

    Case具有两种格式:简单Case函数和Case搜索函数. 1.简单Case函数: CASE sex WHEN‘1’THEN‘男’ WHEN‘0’THEN‘女’ ELSE‘其他’END 2.Case搜 ...

  7. cytoscape.js 教程

    因为数据要展示双向关系,最终选用了cytoscape.js. 效果如图,echarts只能显示单项数据关系. 据我理解,这个插件分两种,一种是基于jquery的,另一种是原声的. 基于jquery是加 ...

  8. SQL 内部连接

    内部链接INNER JOIN关键字选择两个表中具有匹配值的记录. SQL INNER JOIN 语法 SELECT column_name(s) FROM table1 INNER JOIN tabl ...

  9. spring boot中读取配置文件的两种方式

    application.properties test.name=测试 test.url=www.test.com 1.@Value注解 在controller里可以这样直接调用 @Value(&qu ...

  10. 76 学习C++

    0 引言 C++语言特性记录,提高对这门语言的理解,进而带动对编程语言特性的理解. 相关网站及教程 # W3Cschool C++教程 https://www.w3cschool.cn/cpp/ # ...