前言：原来做过一个项目，需要实现一个页面打印的功能，由于项目中使用了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. Python 模块chardet安装 setup.py

    http://pypi.python.org/pypi/chardet#downloads 下载chardet-2.*.*.tar.gz:解压到site-package文件夹, Python及其一些模 ...

  2. POJ1986 Distance Queries （LCA）（倍增）

    Distance Queries Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 12950   Accepted: 4577 ...

  3. Adb工具配置和设备连接

    ADB全程Android Debug Bridge,是Android SDK里的一个工具,用这个工具可以直接操作管理Android模拟器或者真实的Android设备(如手机). 一.Adb工具使用配置 ...

  4. SCRIPT7002: XMLHttpRequest: 网络错误 0x2ef3, 由于出现错误 00002ef3 而导致此项操作无法完成,浏览器中的Keep-Alive

    http://www.cnblogs.com/OpenCoder/p/5089258.html     IE中Keep-Alive机制引起的错误 我们知道Http协议是基于TCP/IP连接的,也就是说 ...

  5. wget: unable to resolve host address 解决办法

    vim /etc/resolv.conf 加上下面两句: nameserver 8.8.8.8 #google域名服务器nameserver 8.8.4.4 #google域名服务器

  6. Maven最佳实践：Maven仓库（转）

    转自:http://juvenshun.iteye.com/blog/359256 什么是Maven仓库 在不用Maven的时候,比如说以前我们用Ant构建项目,在项目目录下,往往会看到一个名为/li ...

  7. github上传本地项目

    github上传本地项目,分为两个部分: 1.如果建立了ssh key的,直接看第二部分的上传部分就行了 2.如果没有建立ssh key的,就从头开始看吧 ——————————————————我是快乐 ...

  8. ng-if ng-show ng-hide 的区别

    angularjs ng-if ng-show ng-hide区别 在使用anularjs开发前端页面时,常常使用ng-show.ng-hide.ng-if功能来控制页面元素的显示或隐藏,那他们之间有 ...

  9. MSER算法介绍

    MSER代码编译: matlabroot %如果是VS2010则解压VS2010MEX支持文件到MATLAB根目录 unzip('E:\Software\develop Tools\VS2010MEX ...

  10. 16、java中的异常处理机制

    异常:就是程序在运行时出现不正常情况.异常由来:问题也是现实生活中一个具体的事物,也可以通过java的类的形式进行描述.并封装成对象. 其实就是java对不正常情况进行描述后的对象体现. 对于问题的划 ...