前言：原来做过一个项目，需要实现一个页面打印的功能，由于项目中使用了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. Spark RDD API详解(一) Map和Reduce

    RDD是什么? RDD是Spark中的抽象数据结构类型,任何数据在Spark中都被表示为RDD.从编程的角度来看,RDD可以简单看成是一个数组.和普通数组的区别是,RDD中的数据是分区存储的,这样不同 ...

  2. OS实验报告--FCFS算法

    实验二.作业调度模拟实验 专业:商业软件工程  姓名:王泽锴 学号:201406114113 一.实验目的 (1)加深对作业调度算法的理解: (2)进行程序设计的训练. 二.实验内容和要求 (1)实验 ...

  3. UVA 10815

    题意:输入文本,把不同的单词按照字典序排列. /* tolower 功 能: 把字符转换成小写字母,非字母字符不做出处理 头文件 目前在头文件iostream中也可以使用 isalpha 一种函数:判 ...

  4. HackerRank-Longest Subarray

    give an array and target value, find the max length of the subarray which sum of the elements is les ...

  5. 2016HUAS_ACM暑假集训3F - Jungle Roads

    这个题目属于最小生成树问题,可以用Prim,也可以用Kruskal(还没试).题意简单直接,给你一个图,求出它最小生成树的权值. 题目最有趣的地方就是图的顶点是字母,稍微处理一下就好了. Sample ...

  6. 2015年我国IT行业发展趋势分析（转）

    中国信息化建设步伐正持续推进,行业和企业信息化应用水平也在不断提高,这使得it技术与应用系统已成为企业日常工作中不可或缺的基础设施.与此同时,用户关注的重心也日益转向it系统的稳定性.系统对生产效率的 ...

  7. 改进：js修改iOS微信浏览器的title

    问题简介 前端入门没多久,可能连入门也不算,最近网上流行各自书籍改名,什么<前端开发,从入门到放弃>,<Android开发,从入门到改行>之类的,程序员真是个爱自嘲的群体,但我 ...

  8. PHP递归重新排序无限级分类数组

    public static function Menus($id,$spac=0){ /* $data = array( 1 => array('id' => 1,'name' => ...

  9. Beta版本冲刺——day6

    No Bug 031402401鲍亮 031402402曹鑫杰 031402403常松 031402412林淋 031402418汪培侨 031402426许秋鑫 站立式会议 今日计划表 人员 工作 ...

  10. 【原创】新手用外挂来学C语言，外挂入门教程【2013.03.12更新V5.1版

    目录 e@vZg8Ie  第一章 配置编译环境    - 5 - W7~_XI  1.1 安装CB和gcc    - 6 - fj( WH L  1.2 使用gcc编写我们的第一个C程序    - 1 ...