<!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. 获得本机物理ip地址mac

    https://blog.csdn.net/guang670248515/article/details/81040797 文章来源:https://blog.csdn.net/kingepoch/a ...

  2. postgres之使用python连接并操作

    取一万个随机数,插入数据库 import random import psycopg2 import string conn=psycopg2.connect(database='postgres', ...

  3. JavaSE---多线程---线程的控制

    1.Java提供了一些工具方法,可以便捷控制线程的执行: 1.1 join Thread提供了让一个线程等待另一个线程执行完成的方法:join: 当某个程序的执行流中调用其他线程的join方法,该线程 ...

  4. python3 实现简单ftp服务功能（客户端）

    转载请注明出处! 可执行的命令: lspwdcd put rm get mkdir 上传下载,显示进度百分比以及平均上传下载速度 客户端 main代码: #Author by Andy #_*_ co ...

  5. 【leetcode】901. Online Stock Span

    题目如下: 解题思路:和[leetcode]84. Largest Rectangle in Histogram的核心是一样的,都是要找出当前元素之前第一个大于自己的元素. 代码如下: class S ...

  6. 【leetcode】679. 24 Game

    题目如下: 解题思路:24点是非常经典的游戏了,因为本题数据量小,可以使用穷举法,把所有的可能结果都算出来.假设nums = [a,b,c,d],记f(n)表示用nums中n个数字进行运算可以得到的结 ...

  7. Delphi 格式化函数 Format函数

    function Format(const Format: string; const Args: array of const): string; function Format(const For ...

  8. for循环语句示例

    for循环语句示例 一判断/var/目录下所有文件的类型 完整脚本 [root@centos73 ~]# cat shell_scripts/filetype.sh #!/bin/bash #Auth ...

  9. SpringBoot使用Swagger2搭建强大的RESTful API 文档功能

    swagger用于定义API文档. Swagger2的使用 Maven Plugin添加Swagger2相关jar包 <!--swagger2 start--> <dependenc ...

  10. 火狐插件火狐黑客插件将Firefox变成黑客工具的七个插件

    目前很多插件不支持 Firefox 3.5 哦1. Add N Edit Cookies 查看和修改本地的Cookie,Cookie欺骗必备. 下载:http://code.google.com/p/ ...