前言：原来做过一个项目，需要实现一个页面打印的功能，由于项目中使用了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. mysql 操作用户权限

    使用可以对mysql数据库用户表有操作权限的用户名登陆mysqlinsert into user(Host,User,Password) values('%','name','password');如 ...

  2. CE 内存申请

    char ch_ReadByte='H'; char *ptr_OneLineData; unsigned ); if ((ptr_OneLineData = (char *)malloc(bufsi ...

  3. 反射【类Class、成员变量Field、方法Method】

    Class<?> c = Class.forName("main.Main$MyClass"); //要包名+类名 Object obj = c.newInstance ...

  4. @SuppressWarnings("deprecation")

    在Java编译过程中会出现很多警告,有很多是安全的,但是每次编译有很多警告影响我们对error的过滤和修改,我们可以在代码中加上 @SuppressWarnings("XXXX") ...

  5. float和double精度问题

    System.out.println(new BigDecimal(253.90).doubleValue() * 100);25390.0精度正确 System.out.println(new Bi ...

  6. JavaScript数据类型之隐式类型转换

    JavaScript的数据类型分为七种,分别为null,undefined,boolean,string,number,object,symbol ( ECMAScript 2015新增).objec ...

  7. Python线程通信

    subprocess 作用 模块用于生产新的进程,连接到其输入.输出.错误管道,并获取其返回值 1. 如何使用subprocess模块 启动子进程的推荐方法是使用以下方便功能. 对于更高级的用例,当这 ...

  8. Centos 6.5安装oracle 11g

    (添加host)一.Centos 6.5 安装图形界面 gnome # yum groupinstall "Desktop" # yum groupinstall "X ...

  9. 使用 openssl 生成证书

    一.openssl 简介 目前最流行的 SSL 密码库工具官网:https://www.openssl.org/source/ 构成部分 密码算法库 密钥和证书封装管理功能 SSL通信API接口 用途 ...

  10. python获取字典的key列表

    获取字典的所有key: # !/usr/bin/python3.4 # -*- coding: utf-8 -*- b = { 'video':0, 'music':23 } print(list(b ...