前言：原来做过一个项目，需要实现一个页面打印的功能，由于项目中使用了AngularJS+Bootstrap等前端框架，需要打印的页面又在弹出框中，使用了Bootstrap的模态框后发现打印的效果不太好，后来就使用原生的方式弹出一个新的窗口，不过新的窗口中的某些数据又需要从前一个页面中获取，使用AngularJS框架后发现从后台返回的页面总是被封装成一个对象，压根展现不了，怎么办？下面的这个小方法就是用于解决这个问题的——页面间跳转，在需要传递的参数不多的情况下，使用URL路径来传递参数。代码比较简单，在此小记一笔，兴许以后能用得到，至少明白这种思路是怎么回事。

1：为了方便实例的演示，将演示的静态文件放在了同一个目录下

2：getRequestParameters.js文件，专门用于获取GET请求中的参数，此文件是此次小白例的核心代码，注释详细不多说了

(function(){

    //返回当前 URL 的查询部分（问号 ? 之后的部分）。

    var urlParameters = location.search;

    //声明并初始化接收请求参数的对象

    var requestParameters = new Object();

    //如果该求青中有请求的参数，则获取请求的参数，否则打印提示此请求没有请求的参数

    if (urlParameters.indexOf('?') != -1)

    {

        //获取请求参数的字符串

        var parameters = decodeURI(urlParameters.substr(1));

        //将请求的参数以&分割中字符串数组

        parameterArray = parameters.split('&');

        //循环遍历，将请求的参数封装到请求参数的对象之中

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

            requestParameters[parameterArray[i].split('=')[0]] = (parameterArray[i].split('=')[1]);

        }

        console.info('theRequest is =====',requestParameters);

    }

    else

    {

        console.info('There is no request parameters');

    }

    return requestParameters;

})();

3：home.html文件，假设这个简单的页面就是第一个页面，实验证实了一下，在本页面中也能拿到对应的请求参数

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>Home Page</title>

        <!-- 引入获取页面请求条件的JS文件 -->

        <script type="text/javascript" src="getRequestParameters.js"></script>

    </head>

    <body bgcolor="LightCyan" align="center">

        <a href="home.html">I will go to Home Page and no request  parameters</a>

        <br/>

        <a href="index.html">I will go to Index Page and no request  parameters</a>

        <br/>

        <a href="home.html?name=猪八戒&sex=boy&age=99">I will go to Home Page and bring request parameters</a>

        <br/>

        <a href="index.html?name=猪八戒&sex=boy&age=99">I will go to Index Page and bring request parameters</a>

    </body>

</html>

4：index.html文件，这个文件就是我们假设要跳转的静态文件，非常简单，仅供实例演示使用

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>Index Page</title>

        <!-- 引入获取页面请求条件的JS文件 -->

        <script type="text/javascript" src="getRequestParameters.js"></script>

    </head>

    <body bgcolor="AliceBlue" align="center">

    </body>

</html>

5：如下图所示，是实例代码演示的效果

6：小结

此例思路、代码都比较简单，不过不容易想的到，以前做的项目牵涉到页面间跳转需要传递参数的，几乎全部都是将参数传送到后端，然后从后端再传送到前端的。很少使用这种前端页面间通过URL来传递参数的方式，不过这种方式有时候也是可行。

JS-获取URL请求参数的更多相关文章

  1. JS获取url请求参数

    JS获取url请求参数,代码如下: // 获取url请求参数 function getQueryParams() { var query = location.search.substring(1) ...

  2. js获取URL请求参数与改变src

    js实现: <script> function GetQueryString(name) { var reg = new RegExp("(^|&)" + na ...

  3. js获取url中参数名也参数值

    要撮利用js获取url中参数名也参数值这个不多见了,但我今天需要这样操作,下面我来给大家介绍一下具体的实例方法.   在已知参数名的情况下,获取参数值,使用正则表达式能很容易做到. js的实现方法如下 ...

  4. js获取url的参数和值的N种有效方法

    js获取url的参数和值的N种有效方法 function getParameterByName(name) { name = name.replace(/[\[]/, "\\\[" ...

  5. js获取url地址栏参数的方法，解决中文乱码问题，能支持中文参数

    第一种:参数只能是英文的 function getQuery(name) { var reg = new RegExp("(^|&)" + name + "=([ ...

  6. js获取url地址栏参数

    前端开发中经常会遇到需要获取url地址栏参数问题 方法如下: function getQueryStringByName(name){ var src = "www.baidu.com?na ...

  7. js 获取url具体参数

    用JS获取地址栏参数的方法(超级简单) 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new ...

  8. 【记录】JS 获取 URL 中文参数编码

    比如 URL:http://www.xxxx.com/中文参数 这个在 js 获取"中文参数"的时候会出现乱码. 解决方法:decodeURIComponent(获取的中文参数);

  9. js获取url传递参数（转的，原作不详）

    这里是一个获取URL带QUESTRING参数的JAVASCRIPT客户端解决方案,相当于asp的request.querystring,PHP的$_GET 函数: <Script languag ...

  10. springboot获取URL请求参数的多种方式

    1.直接把表单的参数写在Controller相应的方法的形参中,适用于get方式提交,不适用于post方式提交. /** * 1.直接把表单的参数写在Controller相应的方法的形参中 * @pa ...

随机推荐

  1. 解决Eclipse中文乱码 - 技术博客 - 51CTO技术博客 http://hsj69106.blog.51cto.com/1017401/595598/

    解决Eclipse中文乱码 - 技术博客 - 51CTO技术博客  http://hsj69106.blog.51cto.com/1017401/595598/

  2. Python 打印99乘法口诀表

    import string for x in xrange(1,10): for y in xrange(1,x+1): print string.ljust("%d*%d = " ...

  3. kali linux 安装nvidia

    开始安装之前需要说明一下几点: 1.安装闭源显卡驱动有一定风险,比如黑屏或者无法进入图形界面什么的.如果您很害怕折腾,而且不在Linux系统中玩开源游戏(比如Nexuiz)或看高清电影,默认的nouv ...

  4. eclipse不能新建server

    将server删除了之后,再新建server选择tomcat的时候servername栏空着而且不能写东西,就添加不成功了,怎么办呢,问过度娘之后,问题迎刃而解,步骤如下 1.到[工程目录下 work ...

  5. 关于AJAX中status中12030与12031的错误

    最近使用ajax调用一般处理程序时,出现外网调用不成功,内网调用成功,错误码为12030或12301的情况.当时在网上搜索了一些资料,有的说是因为文件中取了个中文名称导致的,有的是说要配置什么IIS之 ...

  6. [原创]cocos2d-x研习录-第三阶 特性之加速度传感器

    智能手机的游戏与应用中,也经常会用到加速传感器事件来丰富用户的体验,比如飞翔的企鹅(英文AirPenguin)游戏就是通过加速度传感器来控制角色的移动和跳跃方向.下面学习Cocos2D-x中如何使用加 ...

  7. 数据库设计与 ER 模型 - 数据库系统原理

    数据库系统生存周期 数据库应用系统的开发是一项软件工程,一般具有信息的采集.组织.加工.抽取.综合.传播等功能,但又有自己的特点,所以称为 数据库工程. 数据库应用系统从开始规划.设计.实现.维护到最 ...

  8. 自动运维:Ansible -ansible tower

    文档主页:http://docs.ansible.com/参考文档:http://docs.ansible.com/ansible/参考文档:http://docs.ansible.com/ansib ...

  9. LeetCode---Hash Table

    299. Bulls and Cows 思路:抽屉法,放进secrets,拿出guess,最终cows = cows - bulls public String getHint(String secr ...

  10. C#实现略缩图

    public class GenerateThumbnail { private Image imageFrom; /// <summary> /// 源图的路径(含文件名及扩展名 /// ...