js 获取地址栏参数 封装方法

下面是一个 JavaScript 函数,用于获取 URL 中的参数并以对象形式返回:

//获取地址栏参数(返回对象)function getUrlParams() {var urlParams = {};var queryString = window.location.search;if (queryString) {queryString = queryString.replace(/^\?/, '');var paramPairs = queryString.split('&');for (var i = 0; i < paramPairs.length; i++) {var pair = paramPairs[i].split('=');var key = decodeURIComponent(pair[0]);var value = decodeURIComponent(pair[1] || '');urlParams[key] = value;}}return urlParams;}

在上面的代码中,我们定义了一个名为 getUrlParams 的函数,用于获取 URL 中的参数,并返回一个包含所有参数的对象。函数内部首先使用 window.location.search 获取 URL 中的查询字符串部分(即参数部分),然后通过解析查询字符串来填充一个名为 urlParams 的对象。

具体来说,我们首先使用 replace 方法将查询字符串中开头的问号去掉,然后使用 split 方法将查询字符串拆分成多个键值对,再使用 decodeURIComponent 方法对键和值进行解码,并将它们填充到 urlParams 对象中。最后,我们将 urlParams 返回给调用方。

您可以在自己的代码中使用这个函数来获取 URL 参数,例如:

var params = getUrlParams(); // 假设 URL 为 https://example.com?name=John&age=30 
console.log(params.name); // 输出 "John" console.log(params.age); // 输出 "30"

这将会输出一个包含 URL 所有参数的对象,其中键为参数名,值为参数值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/159430.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

运行代码时不同软件的参数写法

目录 pycharm终端 pycharm 如下图所示&#xff0c;不同参数间不需要什么间隔什么东西 终端 如下图所示&#xff0c;不同参数间需要用一个符号来间隔

npm ERR!问题解决

问题一 解决办法 两个文件夹【node_global】和【node_cache】 修改文件属性 问题二 解决办法 安装淘宝镜像 npm config set registry https://registry.npm.taobao.org 查看是否成功&#xff1a; npm config get registry 是淘宝的就ok

腾讯三季度财报解读:AI大模型成下个十年的新支点?

2023年&#xff0c;腾讯重回高增长轨道。 近日&#xff0c;腾讯披露了2023年第三季度财报&#xff0c;营收1546.25亿元&#xff0c;同比增长10%&#xff1b;非国际通用会计准则下的净利润为449.21亿元&#xff0c;同比增长39%。此前两个季度&#xff0c;腾讯的营收、净利润增速…

DependencyProperty.Register:wpf 向别的xaml传递参数

一.使用背景&#xff1a;在A.xaml中嵌入B.xaml&#xff0c;并且向B.xaml传递参数。 函数介绍&#xff1a; public static DependencyProperty Register(string name, Type propertyType, Type ownerType );name&#xff08;string&#xff09;&#xff1a; 依赖属性的名称。在…

Tekton — 通过tekton-operator部署tekton组件

文章目录 版本信息部署准备安装卸载tekton组件 Tektoncd Operator 作为一个 Kubernetes 的扩展&#xff0c;可以方便快捷地在 Kubernetes 集群上安装、升级和管理 Tekton Pipelines、Dashboard、Triggers 等组件。 那么本篇文章介绍在K8S集群中如何通过tekton-operator部署Tekt…

SAE 2.0,让容器化应用开发更简单

云布道师 云原生这个概念从提出&#xff0c;到壮大&#xff0c;再到今天的极大普及&#xff0c;始终处于一个不断演进和革新的过程中。云原生体系下应用的托管形态是随着企业应用架构在不断演进的。最早的应用大多是集中式、单体式的&#xff0c;应用通过优雅的分层来实现领域…

七牛云产品使用介绍之Kodo篇

前不久刚参加完七牛云举办的第二届1024创作节&#xff08;虽然只是我单方面的被各方大佬碾压&#xff09; 赛题是网页短视频应用开发&#xff0c;要求作品中使用七牛云的相关产品&#xff0c;于是我决定分享下七牛云产品的使用&#xff08;这么好用的产品很难忍住不想分享的心情…

易货:一种新型的商业模式

随着经济的发展和社会的进步&#xff0c;人们对于交易的需求和方式也在不断变化。传统的商业模式已经无法满足人们对于多元化、个性化、高效的需求。在这样的背景下&#xff0c;易货模式逐渐走进人们的视野&#xff0c;成为一种新型的商业模式。 易货模式是一种以物换物的交易方…

提升企业人效,从精细化考勤管理开始

过去&#xff0c;许多企业提到考勤管理&#xff0c;只能关联到打卡、请假、算薪这些简单的事务性流程。随着越来越多企业希望通过数字化转型来提升运营效率&#xff0c;实现精细化人员管理。考勤数据的作用也不再仅限于算薪&#xff0c;而是成为了企业分析人效的关键因子。因此…

产品经理的具体工作职责有什么?

产品经理是现代企业中非常重要的一种职位&#xff0c;其工作职责也非常广泛和复杂。产品经理需要在市场、用户、技术等多个方面进行综合考虑&#xff0c;为企业开发出具有竞争力的产品&#xff0c;从而推动企业的发展。下面我们将详细介绍产品经理的具体工作职责。 一、市场调研…

如何正确复制CSDN文章到自己的博客

1.csdn 文章页面&#xff0c;按f12打开浏览器开发者工具 2.按ctrl f 找 "article_content" 3.在该元素源代码上右键 “Copy”->“Copy element” 4.新建一个txt文件,把你粘贴的东西复制进去,然后再把文件名的后缀改为html,然后打开html文件,把里面的内容ctrlA全部…

PHP如何持续监听Redis的消息订阅并推送到前端?

PHP如何持续监听Redis的消息订阅并推送到前端&#xff1f; 概述: 在许多Web应用程序中&#xff0c;实时推送消息是很常见的需求。当我们需要向前端实时发送消息时&#xff0c;往往会使用轮询或长轮询的方式去获取最新数据。但这种方式对服务器资源的消耗较大&#xff0c;同时响…

Linux 中 .tar 和 tar.gz 的区别

1、前言 有时候你会发现&#xff0c;即便是有些拥有 3 年左右工作经验的运维或开发工程师对 .tar 和 .tar.gz 的区别并不是很清楚。.tar 和 .tar.gz 是在 Linux 系统中用于打包和压缩文件的两种常见格式。它们之间的主要区别在于压缩算法和文件扩展名。 2、区别 .tar .tar 是…

电商领域的三大沉疴难题?实在智能RPA来帮你药到病除!

在电商市场规模迅速扩大的当下&#xff0c;厂家们为了保持自身的竞争力&#xff0c;纷纷走上了数智化转型的道路&#xff0c;明白学会使用自动化利器才是制胜之道。 如今从产业的生产线到运营商、物流运输、商品售前、商品售后&#xff0c;实在RPA在电商平台的应用已经十分广泛…

bazel远程构建(Remote Execution) -- Buildfarm部署中的问题

问题1&#xff1a;server报logOverdueOperation和WARNING: removed dispatched operation shard/operations/&#xff0c; worker报WARNING: missing queued operation: shard/operations/等问题&#xff0c;详情如下&#xff1a; Server Log INFO: DispatchedMonitor: Testin…

Less精简直接上手,纯干货教程

目录 介绍 安装插件 入门使用测试 ​编辑 less变量 介绍 less作为一门CSS扩展语言&#xff0c;也就是说CSS预处理器。&#xff08;Leaner Style Sheets&#xff09;简称less&#xff0c;它只不过是为css新增这些的功能&#xff0c;比如说&#xff1a;变量、函数、作用域等等…

java springboot测试类鉴定虚拟MVC运行值与预期值是否相同

好 上文java springboot在测试类中构建虚拟MVC环境并发送请求中 我们模拟的MVC环境 发送了一个请求 我们这次需要 对比 预期值和运行值是否一直 这里 我们要用一个 MockMvcResultMatchers 他提供了非常多的校验类型 例如 请求有没有成功 有没有包含请求头信息 等等 这里 我们做…

焦炉加热系统简述

烟道吸力 焦炉负压烘炉分烟道的吸力会影响立火道温度&#xff0c;具体影响因素如下&#xff1a; 烟道吸力过大会导致热量被抽走&#xff0c;使立火道温度降低。烟道吸力不足会导致烟气在烘炉内停留时间过长&#xff0c;使热量无法充分利用&#xff0c;也会导致立火道温度降低…

js科学计数法转整数不能用parseInt

js里面特别大和特别接近0的数字&#xff0c;会自动采用科学计数法&#xff0c;比如2.1e-10、3.45e10&#xff0c;这种数字在转整数时需要注意了&#xff1a; parseInt(“2a”)得到2 parseInt(1.34)得到1 parseInt(2.1e-10)得多少&#xff1f;答案是2&#xff0c;他把科学计数法…

数字IC基础:有符号数和无符号数加、减法的Verilog设计

相关阅读 数字IC基础https://blog.csdn.net/weixin_45791458/category_12365795.html?spm1001.2014.3001.5482 本文是对数字IC基础&#xff1a;有符号数和无符号数的加减运算一文中的谈到的有符号数加减法的算法进行Verilog实现&#xff0c;有关算法细节请阅读原文&#xff0…