前言:原来做过一个项目,需要实现一个页面打印的功能,由于项目中使用了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. 基于boa服务器的web控制mini2440的GPIO口

    win7 系统  虚拟机:ubuntu12.04 开发板:mini2440 上一篇已经详细的讲解了如何配置boa服务器,在这里我们就要利用boa服务器带来的便利,利用web控制开发板上的GIPO口,这 ...

  2. 学习使用Robot Framework自动化测试框架-web元素定位

    转:http://blog.csdn.net/u012145166/article/details/50342569 1.name和id 其中使用到了name和id定位.但有时候由于开发人员的疏忽或者 ...

  3. PBOC电子钱包与电子现金及QPBOC

    电子钱包:EP 电子现金:EC,在PBOC规范中的13部分定义了<基于借贷记应用的小额支付规范中> QPBOC:在PBOC规范的12部分中定义了<费接触式IC卡支付规范> PB ...

  4. python3 selenium模拟登陆斗鱼提取数据保存数据库

    # coding=utf-8from selenium import webdriverimport jsonimport timeimport pymongo class Douyu: def __ ...

  5. Maps JavaScript API的JavaScript代码

    要请求多个库,请用逗号分隔它们   <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY& ...

  6. Laravel 添加路由文件

    在laravel 5.4中的routes文件夹里面默认有两个路由文件web.php和api.php. 新建路由文件 我们在routes文件夹下多创建一个admin.php文件作为管理后台的路由 修改R ...

  7. centos 6.x 部署uwsgi+flask项目

    一.项目背景 1. 公司需求要做一个在线统计页面; 2. 统计在线人数,进行人数数据展示; 3. 类似QQ官网在线人数 二.测试环境 [root@linux-node2 ~]# cat /etc/*r ...

  8. LoadRunner中的异常处理

    在脚本的Run-time Settings中,可以设置在脚本运行过程中发生错误的处理方式.进入到Run-time Settings中,切换到Miscellaneous标签页,可以看到Error Han ...

  9. 今天安装了arch,感觉不错,这速度可以

    虽然没有想想中的那么那么快,不过已经可以了 总结一下遇到的问题以及i自己安装的软件 1.u盘硬盘不能自动挂载 安装gvfs 2.不能读写挂载 安装ntfs-3g 3.时间不对 照wiki上的说 #ln ...

  10. 今日工作总结:jquery轮转效果的集成与前台页面banner的设计思路总结

    今日做了两个项目中的两个问题,现在特来总结一下,以便分享给更多的朋友们. 1.jquery轮转效果的集成 涉及到jquery的不同版本问题,解决办法是在后缀用jQuery代替$.项目地址在:121.4 ...