js以键值对的方式获取URL的参数
在前端日常的开发中,大多数时候我们只需用js获取到url中的参数即可,这个实现起来也很方便如:
function getQueryString(value) {
const reg = new RegExp('(^|&)' + value + '=([^&]*)(&|$)');
const r = window.location.search.substr(1).match(reg) || window.location.hash.substring((window.location.hash.search(/\?/)) + 1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
}
使用方法如:getQueryString('appId')
以上的方法是包含了url中不含hash获取参数的方式以及包含hash获取参数的方式,是可以一次获取一个参数的。
如果你使用的是VUE,那么获取参数就更简单了:this.$route.query
或this.$route.params
。
可实际的开发中,比如有这样一个需求:
单点登录中的A系统的某个页面没有登录,它就会来到一个统一的登录界面并在url中携带有它当前页面的地址和参数,参数可能还会有多个,在登录成功后,需要再返回到之前访问的页面并且还要把该页面的参数再放在url中一并返回,而且每个页面、每个系统的参数名可能还不一样,所以你就不能把返回的参数名写死,那是不是就很难办呢?
难办?卧槽,那就别办了!
乌鸦哥就是霸气!!!开玩笑哈,再难办,在我们的开发中,只要有需求,我们就要办!办它!!!
哈哈哈... 其实好办,在登录页面用js获取到它传过来的参数的键值对,再把这些键值对拼接到要返回的url的后边即可:
var url = "http://localhost:9527/login?appId=123&backUrl=http://www.baidu.com?id=789&type=info";
// var url = window.location.href;
function getUrlParams(url){
if(decodeURIComponent(url).indexOf("?") > -1){
var result = [];
var urlParamsArr = decodeURIComponent(url).split("?");
urlParamsArr.shift();
let newUrlParamsArr = urlParamsArr.join("&").split("&");
for(var i = 0; i < newUrlParamsArr.length; i++){
var paramKey = newUrlParamsArr[i].split("=")[0];
var paramValue = newUrlParamsArr[i].split("=")[1];
result.push({
key: paramKey,
value: paramValue
})
}
return result;
}else{
console.log("该URL中不含参数")
}
}
console.log(getUrlParams(url));
结果如图所示:
是不是很简单!这是我写的一种实现方法,也可能会有其他更好的实现方法,欢迎各位跟我随时沟通。
js以键值对的方式获取URL的参数的更多相关文章
- IOS开发---菜鸟学习之路--(二十三)-直接利用键值对的方式来处理数据的感想
首先声明,本文纯粹只是做为本人个人新手的理解.文中的想法我知道肯定有很多地方是错的. 但是这就是我作为一个新人的使用方法,对于大牛非常欢迎指导,对于喷子请绕道而行. 由于这是早上跟我学长讨论数据处理时 ...
- js键盘键值大全
原文地址:http://blog.csdn.net/avenccssddnn/article/details/7950524 js键盘键值 keycode 8 = BackSpace BackSpac ...
- (转)js弹窗&返回值(window.open方式)
本文转载自:http://hi.baidu.com/z57354658/item/5d5e26b8e9f42fa7ebba93d4 js弹窗&返回值(window.open方式) test.h ...
- js获取url的参数和值的N种有效方法
js获取url的参数和值的N种有效方法 function getParameterByName(name) { name = name.replace(/[\[]/, "\\\[" ...
- js获取url中参数名也参数值
要撮利用js获取url中参数名也参数值这个不多见了,但我今天需要这样操作,下面我来给大家介绍一下具体的实例方法. 在已知参数名的情况下,获取参数值,使用正则表达式能很容易做到. js的实现方法如下 ...
- JS获取url请求参数
JS获取url请求参数,代码如下: // 获取url请求参数 function getQueryParams() { var query = location.search.substring(1) ...
- [JS]window.location获取url各项参数详解
window.location方法后还还可以带href,search等参数,下面我们来看看获取url各项参数的办法. URL即:统一资源定位符 (Uniform Resource Locator, U ...
- js获取url地址栏参数
前端开发中经常会遇到需要获取url地址栏参数问题 方法如下: function getQueryStringByName(name){ var src = "www.baidu.com?na ...
- [工具类]获取url中参数列表
写在前面 在项目中经常用到解析url中参数的逻辑,今天先下载就自己封装了一个方法,方便以后使用的时候,信手拈来.当然这里给出的方法是针对常见的url参数类型的,对于重写url,或者路由格式的不考虑. ...
随机推荐
- 基于USB网卡适配器劫持DHCP Server嗅探Windows NTLM Hash密码
catalogue . DHCP.WPAD工作过程 . python Responder . USB host/client adapter(USB Armory): 包含DHCP Server . ...
- centos7防火墙设置
前言 CentOS7 与之前版本在防火墙配置上不同,防火墙从iptables变成了firewalld Centos7默认安装了firewalld,如果没有安装的话,可以使用yum命令进行安装 yum ...
- 第二节:重写(new)、覆写(overwrite)、和重载(overload)
一. 重写 1. 关键字:new 2. 含义:子类继承父类中的普通方法,如果在子类中重写了一个和父类中完全相同的方法,子类中会报警告(问是否显式的隐藏父类的中的方法),如果在子类中的方法前加上new关 ...
- 第十节:委托和事件(2)(泛型委托、Func和Action、事件及与委托的比较)
一. 泛型委托 所谓的泛型委托,即自定义委托的参数可以用泛型约束,同时内置委托Func和Action本身就是泛型委托. 将上一个章节中的Calculator类中的方法用自定义泛型委托重新实现一下. p ...
- selenium新手常遇到的坑
本文是以Chrome为例: 1.Chrome相对应的chromedriver的版本信息[点击浏览器的右上角的浏览器信息--------帮助-------关于Google Chrome查看相对应的信息- ...
- [译]Ocelot - Headers Transformation
原文 Add to Request 为上游请求添加请求头,只需如下一样将下面的配置添加到一个ReRoute里: "UpstreamHeaderTransform": { " ...
- js,jQuery获取html5的data-*属性
今天做项目的时候发现一个坑,关于jQuery获取data-*属性的方法data(),特写此篇来记录. data-*自定义数据属性 HTML5规定可以为元素添加非标准型的属性,只需添加前缀data-,这 ...
- Arduino-接口图
Arduino开发板上数字输入输出引脚中的3.5.6.9和11都提供0V和5V之外的可变输出.在这些引脚的旁边,会标有PWM——脉冲宽度调制,PWM是英文“Pulse Width Modulation ...
- ubuntu 16.04 安装 Mask_RCNN 遇到的问题集锦
源码网页(Mask R-CNN for object detection and instance segmentation on Keras and TensorFlow): https://git ...
- java.lang.NoClassDefFoundError: org/apache/commons/lang3/StringUtils
♦ 问题所在:项目lib包里少一个jar包 ♦ 解决办法: commons-lang3-3.1.jar 导入到项目就ok