在前端日常的开发中,大多数时候我们只需用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. python 网络编程之TCP传输&粘包传输

    只有TCP有粘包现象,UDP永远不会粘包. 所谓粘包问题主要还是C/S两端数据传输时 因为接收方不知道消息之间的界限,不知道一次性提取多少字节的数据所造成的 根本原因:粘包是由TCP协议本身造成的,T ...

  2. CMDB服务器管理系统【s5day90】:创建资产更新服务器硬盘信息

    1.创建硬件资产信息 import json from django.shortcuts import render,HttpResponse from django.views.decorators ...

  3. 优秀的电商平台Jshop栗子

    摘录自:https://blog.csdn.net/chenjun9205/article/details/52412503 下载源代码 git clone https://git.oschina.n ...

  4. UIWebView代码注入时机与姿势

    一个奇怪的业务场景,引发的胡乱思考 问题其实不难解决,只是顺着这个问题,发散出了一些有意思的东西 本文旨在讨论UIWebView,WKWebView有自己的机制,不用这么费劲 我们的业务最大的最重要的 ...

  5. 使用VS的生成事件命令行指令将生成的exe,dll文件复制到指定文件夹中

    VS预生成事件命令行 和 生成后事件命令行 宏说明 $(ConfigurationName)            当前项目配置的名称(例如,“Debug|Any CPU”). $(OutDir)   ...

  6. EffectiveC++ 第7章 模板与泛型编程

    我根据自己的理解,对原文的精华部分进行了提炼,并在一些难以理解的地方加上了自己的"可能比较准确"的「翻译」. Chapter 7 模版与泛型编程 Templates and Gen ...

  7. Vue项目中使用基于Vue.js的移动组件库cube-ui

    cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...

  8. Leetcode#557. Reverse Words in a String III(反转字符串中的单词 III)

    题目描述 给定一个字符串,你需要反转字符串中每个单词的字符顺序,同时仍保留空格和单词的初始顺序. 示例 1: 输入: "Let's take LeetCode contest" 输 ...

  9. 快速查看linux命令的用法----------TLDR

    之前我们如果用一个命令,但是忘了具体的参数是什么的时候,通常会用man,比如 man tar 但是man有时候特别的冗长,你要找到想要的例子非常困难,所以tldr命令就是一个很好的补充,里边会有经常用 ...

  10. 《css网站布局实录》(李超)——读书札记

    1.web表现层技术 2.HTML链接设计思想 3.对信息进行合理的分析.分类与处理来创造商业价值. 4.头部描述浏览器所需信息,主体包含所需要展现的具体内容. 5.HTML(XHTML)XML 6. ...