在前端日常的开发中,大多数时候我们只需用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.querythis.$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的参数的更多相关文章

  1. IOS开发---菜鸟学习之路--(二十三)-直接利用键值对的方式来处理数据的感想

    首先声明,本文纯粹只是做为本人个人新手的理解.文中的想法我知道肯定有很多地方是错的. 但是这就是我作为一个新人的使用方法,对于大牛非常欢迎指导,对于喷子请绕道而行. 由于这是早上跟我学长讨论数据处理时 ...

  2. js键盘键值大全

    原文地址:http://blog.csdn.net/avenccssddnn/article/details/7950524 js键盘键值 keycode 8 = BackSpace BackSpac ...

  3. (转)js弹窗&返回值(window.open方式)

    本文转载自:http://hi.baidu.com/z57354658/item/5d5e26b8e9f42fa7ebba93d4 js弹窗&返回值(window.open方式) test.h ...

  4. js获取url的参数和值的N种有效方法

    js获取url的参数和值的N种有效方法 function getParameterByName(name) { name = name.replace(/[\[]/, "\\\[" ...

  5. js获取url中参数名也参数值

    要撮利用js获取url中参数名也参数值这个不多见了,但我今天需要这样操作,下面我来给大家介绍一下具体的实例方法.   在已知参数名的情况下,获取参数值,使用正则表达式能很容易做到. js的实现方法如下 ...

  6. JS获取url请求参数

    JS获取url请求参数,代码如下: // 获取url请求参数 function getQueryParams() { var query = location.search.substring(1) ...

  7. [JS]window.location获取url各项参数详解

    window.location方法后还还可以带href,search等参数,下面我们来看看获取url各项参数的办法. URL即:统一资源定位符 (Uniform Resource Locator, U ...

  8. js获取url地址栏参数

    前端开发中经常会遇到需要获取url地址栏参数问题 方法如下: function getQueryStringByName(name){ var src = "www.baidu.com?na ...

  9. [工具类]获取url中参数列表

    写在前面 在项目中经常用到解析url中参数的逻辑,今天先下载就自己封装了一个方法,方便以后使用的时候,信手拈来.当然这里给出的方法是针对常见的url参数类型的,对于重写url,或者路由格式的不考虑. ...

随机推荐

  1. 基于USB网卡适配器劫持DHCP Server嗅探Windows NTLM Hash密码

    catalogue . DHCP.WPAD工作过程 . python Responder . USB host/client adapter(USB Armory): 包含DHCP Server . ...

  2. centos7防火墙设置

    前言 CentOS7 与之前版本在防火墙配置上不同,防火墙从iptables变成了firewalld Centos7默认安装了firewalld,如果没有安装的话,可以使用yum命令进行安装 yum ...

  3. 第二节:重写(new)、覆写(overwrite)、和重载(overload)

    一. 重写 1. 关键字:new 2. 含义:子类继承父类中的普通方法,如果在子类中重写了一个和父类中完全相同的方法,子类中会报警告(问是否显式的隐藏父类的中的方法),如果在子类中的方法前加上new关 ...

  4. 第十节:委托和事件(2)(泛型委托、Func和Action、事件及与委托的比较)

    一. 泛型委托 所谓的泛型委托,即自定义委托的参数可以用泛型约束,同时内置委托Func和Action本身就是泛型委托. 将上一个章节中的Calculator类中的方法用自定义泛型委托重新实现一下. p ...

  5. selenium新手常遇到的坑

    本文是以Chrome为例: 1.Chrome相对应的chromedriver的版本信息[点击浏览器的右上角的浏览器信息--------帮助-------关于Google Chrome查看相对应的信息- ...

  6. [译]Ocelot - Headers Transformation

    原文 Add to Request 为上游请求添加请求头,只需如下一样将下面的配置添加到一个ReRoute里: "UpstreamHeaderTransform": { " ...

  7. js,jQuery获取html5的data-*属性

    今天做项目的时候发现一个坑,关于jQuery获取data-*属性的方法data(),特写此篇来记录. data-*自定义数据属性 HTML5规定可以为元素添加非标准型的属性,只需添加前缀data-,这 ...

  8. Arduino-接口图

    Arduino开发板上数字输入输出引脚中的3.5.6.9和11都提供0V和5V之外的可变输出.在这些引脚的旁边,会标有PWM——脉冲宽度调制,PWM是英文“Pulse Width Modulation ...

  9. ubuntu 16.04 安装 Mask_RCNN 遇到的问题集锦

    源码网页(Mask R-CNN for object detection and instance segmentation on Keras and TensorFlow): https://git ...

  10. java.lang.NoClassDefFoundError: org/apache/commons/lang3/StringUtils

    ♦ 问题所在:项目lib包里少一个jar包 ♦ 解决办法: commons-lang3-3.1.jar 导入到项目就ok