URLSearchParams 获取 web 地址 URL 参数

已于 2023-07-04 15:50:00 修改
阅读量227 收藏
点赞数 1
分类专栏： JavaScript uni-app 文章标签： 前端 javascript html html5 webkit edge
于 2023-07-04 15:46:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/get_404/article/details/131536591
版权

URLSearchParams 获取 web 地址 URL 参数

通过 web 的 API 快速检索获取对应参数的值

代码

onLoad() {
	let geturl = window.location.href // 截取 URL
	let getqyinfo = geturl.split('?')[1] // 获取地址的全部参数
	let getqys = new URLSearchParams('?' + getqyinfo)  //将参数放在URLSearchParams函数中
	this.type = getqys.get('type') // 寻找对应的参数，并取值
},

参考文档

URLSearchParams

URLSearchParams.get()

Brod_Roy
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
URL的参数中有加号传值变为空格的问题(URL特殊字符)
01-19
1.URL特殊字符需转义 2.空格换成加号(+)   3.正斜杠(/)分隔目录和子目录   4.问号(?)分隔URL和查询   5.百分号(%)制定特殊字符   6.#号指定书签   7.&号分隔参数   转义字符的原因： 如果你的表单使用get方法提交，并且提交的参数中有“&”等特殊符的话，如果不做处理，在service端就会将&后面的作为另外一个参数来看待。例如 表单的action为list.jsf?act=Go&state=5 则提交时通过request.getParameter可以分别取得act和state的值。 如果你的本意是act=’go&state=5’这个字
universal-url:节点和浏览器的WHATWG URL
05-08
通用网址 节点和浏览器的WHATWG 。 对于Node.js版本>= 8 ，将使用本机实现。 对于< 8>= 6 。 要安装，请在命令行中输入以下命令： npm install universal-url 用法 const { URL , URLSearchParams } = require ( 'universal-url' ) ; const url = new URL ( 'http://domain/' ) ; const params = new URLSearchParams ( '?param=value' ) ; 全局填充： require ( 'universal-url' ) . shim ( ) ; const url = new URL ( 'http:
详解JS的URL()和URLSearchParams() API接口
最新发布
这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~
05-14 1016
URL() 构造函数返回一个新创建的 URL 对象，表示由一组参数定义的 URL。URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。
url-search-params-polyfill:一个简单的针对JavaScript URLSearchParams的polyfill
05-03
URLSearchParams Polyfill 这是JavaScript的URLSearchParams类的polyfill库。 特征 实现了所有功能。 可以同时用于浏览器和Node.js。 检测浏览器是否完全支持URLSearchParams并将其扩展 兼容IE8及以上 安装 也可以使用npm进行安装。 $ npm install url-search-params-polyfill --save 对于Babel和ES2015 +，请确保导入文件： import 'url-search-params-polyfill' ; 对于ES5： require ( 'url-search-params-polyfill' ) ; 对于浏览器，将index.js文件复制到您的项目中，然后在html中添加script标签： < script src =" index.js "
universal-url-lite:较小的Universal WHATWG URL，用于Browserify等
05-08
通用网址精简版 较小的Universal WHATWG ，用于Browserify /等。 软件包捆绑为392kB（已压缩的99kB）。 该软件包可以通过自定义优化将其编译为较小的文件。 此软件包并非必须直接导入/导入。 应该将它作为别名添加到浏览器的构建过程中。 安装 >= 6 。 要安装，请在命令行中输入以下命令： npm install universal-url-lite 默认垫片 用法： " browser " : { " universal-url " : " universal-url-lite " } 已经对文件大小进行了优化，尤其是将TR46实现几乎完全排除在外。 除了IDNA验证和规范化之外，功能基本上与universal-url包相同。 如果URL包含主机名，且主机名带有〜4500个Unicode字符中的任何一个，且需要特定的大小写折叠，则比较将
use-url-search-params:一个React Hook使用URL查询字符串作为状态管理
05-24
useUrlSearchParams() 一个React Hook使用作为状态管理 为什么你需要这个 用户刷新页面后，您的应用需要保持其状态（用于简单的非敏感数据）。 某些页面设置（例如：表格过滤器，排序，分页等）应保存在URL中，以便用户可以轻松地传递给其他用户。 例如，Tester可以以最少的复制步骤轻松地将页面的URL发送给开发人员。 每当某些URL查询值更改时，您都想做一些事情（请求新数据等）。 将以上所有内容与URL查询结合起来，作为单个事实来源。 安装 npm install use-url-search-params 或者 yarn add use-url-search-params 如何使用 在大多数情况下，您将执行以下操作： import React from "react" ; import { useUrlSearchParams } from "us
URLSearchParams：JavaScript中的URL查询参数处理工具
墨辰JC的博客
08-14 5227
（页面跳转之间，可以使用这种方法进行参数传递）通过以上两个示例，我们可以看到URLSearchParams的强大之处，它简化了URL参数的获取、解析、构建和更新过程。通过URLSearchParams，我们可以轻松地解析、访问、操作和生成URL查询参数，而无需手动进行繁琐的字符串操作和编码解码。通过充分理解URLSearchParams的功能和使用方法，并注意其中的注意事项，我们可以更好地应用它，使我们的代码更加优雅和可维护。访问查询参数：通过
使用 URLSearchParams 解析和管理URL query参数
发果叁
02-18 2361
首先是一个构造函数，会生成一个URLSearchParams对象，参数类型： 不传 ｜ string ｜ object ｜ URLSearchParams， 并且遇到特殊字符它会自动帮我们encode 和 decode//has 返回 [`Boolean`] 判断是否存在此搜索参数//get 获取指定搜索参数的第一个值，如果是编码过的会自动转码， 比如 b对应的值是 %40，会自动转为 @//getAll 获取指定搜索参数的所有值，返回是一个数组。
URlSearchParams构造函数获取URL参数的方法
ddong345的博客
06-15 1353
URL的各个部分组成 url的hash部分 const myURL = new URL('https://ddong345:8080/article/foo#index); //获取 console.log(myURL.hash)//===>#index //设置 myURL.hash='bar' console.log(myURL.href); //=>https://ddong345:8080/article/foo#bar -url的host部分(主机) const myURL =
uniapp请求注意事项
weixin_47813845的博客
10-13 1031
在main.js文件中配置： //Vue.prototype.$baseUrl="http://192.168.1.164/api" //线下接口 Vue.prototype.$baseUrl="https://m.demo.com/api" //线上接口 在demo.vue页面中请求： //GET-请求数据 getInfo(){ uni.request({ url: `${this.$baseUrl}/api-demo/getDemoById?lid=${li.
获取URL参数：split方法、URLSearchParams方法示例
weixin_54165147的博客
01-29 288
总结： 使用split()方法和URLSearchParams()方法都可以很方便地获取URL参数。split()方法比较适合简单的情况，而URLSearchParams()方法提供了更多的功能，适用于复杂的URL参数解析和处理。在JavaScript中，可以使用多种方法来获取URL参数，其中常用的方法有split()和URLSearchParams()。🔥 摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼！🐱 个人主页：SHOW科技，公众号：SHOW科技。
uni-app引入web3在真机运行下兼容性处理方法
任磊
01-14 1124
uni-app引入web3在真机运行下兼容性处理方法
uniapp微信公众号h5开发--（微信开发回调、背景音乐自动播放、微信朋友分享、微信扫一扫）一站式踩坑
yang_xin__的博客
03-17 1628
微信授权登录、背景音乐自动播放、微信朋友分享、微信扫一扫
uniapp实现url传参
weixin_45408578的博客
11-29 142
【代码】uniapp实现url传参。
三种获取URL参数值的方法
m0_60153106的博客
09-08 9416
在 URL 中，查询参数字符串值通常提供有关请求的信息，例如搜索参数或正在使用的对象的 ID。如果在前端处理任何业务或请求逻辑，了解如何从 URL 中检索查询字符串值非常重要。本文分享三种从 URL 获取参数的方法。
uniapp h5在开发环境及部署中获取url携带参数的方法
wangchaohpu的博客
08-05 4777
1、开发环境中参数写在哪个位置 http://localhost:8080/#/?salt=111&salt2=222 在“/#/”后面写参数 2、部署中参数写在哪个位置 http://vd.ydzykj.com/h5/#/?salt=111 在“/#/”后面写参数 3、在启动页中，即pages.json中配置的第一个页面，通过下面的方法获取参数 onShow() { // #ifdef H5 let params = this.getRequestParams(); let
（最全）详解 URLSearchParams
前端笔记——放弃很容易,但坚持一定很酷
11-02 4319
是一个 JavaScript 内置类，用于处理（query string）的解析和构建。是 URL 中位于问号（?）后面的部分，用于传递参数和数值。例如，在以下 URL 中（https://example.com/page?name=John&age=30），查询字符串是通常可以使用 window.location.search 来获取URL中的查询字符串。我测试的初始URL是：http://127.0.0.1:5501/103001_URLSearchParams.html?name=jerry。
uni-app获取url（网页地址参数）中的参数
W49467的博客
11-21 1431
以下内容是根据各方资料整理而来，仅供参考。
Uniapp URL地址栏获取指定参数
扑街仔小贵的博客
04-16 9526
Uniapp获取URL地址栏中的指定参数
URLSearchParams 获取参数
10-12
可以使用URLSearchParams对象来获取URL中的参数。可以通过以下方式创建URLSearchParams对象： ``` const params = new URLSearchParams(window.location.search); ``` 其中，`window.location.search`表示当前URL...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值