JS-获取URL请求参数
JS 获取 参数 请求 url
2023-09-11 14:19:53 时间
前言:原来做过一个项目,需要实现一个页面打印的功能,由于项目中使用了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_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术(一) LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq
- 【JS】window.location获取url各项参数详解
- js获取URL协议,主机头,端口,路径,参数,锚点
- 【Vue/js】Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子)
- Vue - 安装引入 WangEditor V5 富文本编辑器后控制台报错(Nuxt.js 项目同样适用):$attrs is readonly 、 $listeners is readonly
- js获取元素CSS值的各种方法分析
- JS 实现blob与base64互转
- 【HarmonyOS】【JS】【布局】鸿蒙js开发input 输入框弹出输入法时上方布局被挤扁?
- [转]js获取iframe通过url传递的参数
- JS获取地址栏参数转换为对象
- Html跨域js封装,前端页面跨域js,postMessage实现跨域
- jquery.validate.js默认配置,jquery.validate.js自定义提示信息
- JS教程之使用 P5.js 构建一个贪吃蛇游戏(教程含源码)
- vue.js格式使用vant-页面引入2
- js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
- js 获取字符串中最后一个斜杠后面的内容
- Js 获取当前时间
- JS 获取URL参数
- js获取手机验证码倒计时的实现
- JS 工具函数 方法(其中js的crc32和php的crc32区别)
- arcgis api 3.x for js 入门开发系列十四最近设施点路径分析(附源码下载)
- JS实现文本框和文本域获取焦点focus()时,光标在本文的末尾
- webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件
- 一行JS实现功能的代码:随机布尔值、是否为工作日、反转字符串、从日期中获取时间、保留小数点、检测苹果设备、滚动到页面顶部、获取所有参数平均值、温度转换
- js 获取url参数
- 【Harmony OS】【ARK UI】js或ETS如何获取状态栏高度
- js获取当前域名、Url、相对路径和参数以及指定参数
- JS获取各种浏览器窗口大小的方法
- ABP js调用后台的删除 参数为int类型 非对象
- JQuery/JS插件 linq.js 获取所有选中行的Id
- three.js 居中-模型