URLSearchParams: 浏览器中的查询字符串处理利器
一、 概述
在Web开发中,处理URL的查询字符串是一个常见任务。URLSearchParams API 提供了一种简单而强大的方法来处理Web URL的查询参数。它是一个内置的浏览器API,允许你以名称/值对的形式轻松地创建、读取、更新和删除查询参数。
二、URLSearchParams 的核心特性
- 易于使用:提供了简洁的接口来操作查询字符串。
- 链式调用:支持链式调用方法,使代码更简洁。
- 实时更新:对URLSearchParams对象所做的更改会实时反映到URL中。
- 兼容性:现代浏览器普遍支持,包括Chrome、Firefox、Safari和Edge。
三、 基本用法
1. 创建 URLSearchParams 对象
你可以通过几种方式创建URLSearchParams对象:
从现有查询字符串创建:
const queryString = new URLSearchParams(window.location.search);
从对象创建:
const params = new URLSearchParams({name: 'John Doe',age: 30
});
从数组创建:
const params = new URLSearchParams([['name', 'John Doe'],['age', '30']
]);
读取查询参数
使用get方法按名称获取查询参数的值:
const name = queryString.get('name'); // 获取'name'参数的值
设置查询参数
使用set方法设置查询参数的值:
queryString.set('name', 'Jane Doe'); // 设置或更新'name'参数的值
删除查询参数
使用delete方法删除查询参数:
queryString.delete('age'); // 删除'age'参数
获取所有参数的键值对
使用entries方法遍历所有参数:
for (const [key, value] of queryString.entries()) {console.log(`${key}: ${value}`);
}
构建URL
使用toString方法将URLSearchParams对象转换为查询字符串:
const url = new URL('https://example.com');
url.search = queryString.toString();
console.log(url.href); // 输出完整的URL,包括查询字符串
四、高级用法
链式操作
URLSearchParams支持链式调用,使得参数的设置和删除更加方便:
const params = new URLSearchParams().set('page', 1).set('limit', 10).delete('sort').set('order', 'desc');
解析URL
使用URL构造函数和searchParams属性可以方便地解析URL的查询部分:
const url = new URL('https://example.com?name=John&age=30');
const params = url.searchParams;
console.log(params.get('name')); // 输出 'John'
动态更新URL
在单页应用(SPA)中,你可以使用URLSearchParams动态更新URL,而无需重新加载页面:
const params = new URLSearchParams(window.location.search);
params.set('filter', 'newValue');
history.pushState({}, '', `${window.location.pathname}?${params}`);
五、实战案例 - 接口调用传参
1.前端页面
//页面导出数据接口方法
export function exportDaily(data) { // 假设你的data对象是这样的:{ date: '2023-03-15', region: 'beijing' } // 我们需要将它转换为查询字符串 const queryParams = new URLSearchParams(data).toString(); // 构造完整的URL,包括查询参数 const url = `${import.meta.env.VITE_APP_API}/export?${queryParams}`; // 使用window.open打开新的浏览器窗口或标签页 window.open(url, '_blank'); // 注意:出于安全和用户体验的原因,浏览器可能会阻止或限制非用户触发的弹出窗口。 // 因此,最好将此函数绑定到用户交互事件(如点击按钮)上。
}
2. 后端接口
@GetMapping("/export")
@ApiOperation(value = "导出 - 统计")
public void exportDaily(HttpServletResponse response, ExportVO vo){//处理逻辑// ...
};
总结
URLSearchParams是一个强大且灵活的API,它简化了在JavaScript中处理URL查询字符串的复杂性。无论是构建查询字符串,还是解析和更新浏览器当前URL的查询部分,URLSearchParams都提供了一种高效和易于使用的方法。
相关文章:
URLSearchParams: 浏览器中的查询字符串处理利器
一、 概述 在Web开发中,处理URL的查询字符串是一个常见任务。URLSearchParams API 提供了一种简单而强大的方法来处理Web URL的查询参数。它是一个内置的浏览器API,允许你以名称/值对的形式轻松地创建、读取、更新和删除查询参数。 二、URLSearchParam…...
2024最新初级会计职称题库来啦!!!
16.根据增值税法律制度的规定,下列各项中,属于"提供加工、修理修配劳务"的是()。 A.修理小汽车 B.修缮办公楼 C.爆破 D.矿山穿孔 答案:A 解析:选项AB:修理有形动产(…...
Stirling PDF 部署 - 强大的PDF Web在线编辑工具箱
简介 这是一个强大的、可本地托管的、基于 Web 的 PDF 操作工具,可使用 Docker部署。它使您能够对 PDF 文件执行各种操作,包括拆分、合并、转换、重组、添加图像、旋转、压缩等。这个本地托管的 Web 应用程序已经发展到包含一套全面的功能,可…...
大数据面试题之MapReduce(3)
目录 reduce任务什么时候开始? MapReduce的reduce使用的是什么排序? MapReduce怎么确定MapTask的数量? Map数量由什么决定 MapReduce的map进程和reducer进程的ivm垃圾回收器怎么选择可以提高吞吐量? MapReduce的task数目划分 MapReduce作业执行的过程中,中…...
[leetcode]squares-of-a-sorted-array. 有序数组的平方
. - 力扣(LeetCode) class Solution { public:vector<int> sortedSquares(vector<int>& nums) {int n nums.size();vector<int> ans(n);for (int i 0, j n - 1, pos n - 1; i < j;) {if (nums[i] * nums[i] > nums[j] *…...
使用Spring Boot和Spring Data JPA进行数据库操作
使用Spring Boot和Spring Data JPA进行数据库操作 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!在现代的Web应用开发中,数据库操作是不可或缺的一…...
《昇思25天学习打卡营第17天 | 昇思MindSporeCycleGAN图像风格迁移互换》
17天 本节学习了CycleGAN图像风格迁移互换。 CycleGAN即循环对抗生成网络,该模型实现了一种在没有配对示例的情况下学习将图像从源域 X 转换到目标域 Y 的方法。该模型一个重要应用领域是域迁移,可以通俗地理解为图像风格迁移。其实在 CycleGAN 之前&a…...
SecureCRT使用SSH登录服务器报错:Key exchange failed
SecureCRT使用SSH登录Ubuntu服务器报错:Key exchange failed 原因: ssh客户端与服务器的公钥协商失败,SecureCRT客户端所指定的秘钥交换算法(KexAlgorithms ),不在服务端支持范围内。可能是服务端的sshd版…...
Oracle给用户单个表查询权限
Oracle给用户单个表查询权限 1. 创建用户 --创建用户thfj_test,密码为thfj_test create user thfj_test identified by thfj_test;2. 用户授权 --授权连接数据库权限给thfj_test grant create session to thfj_test; --授权查询表USER_INFO 的权限给thfj_test grant sele…...
[Go 微服务] Kratos 验证码业务
文章目录 1.环境准备2.验证码服务2.1 kratos 初始化验证码服务项目2.2 使用 Protobuf 定义验证码生成接口2.3 业务逻辑代码实现 1.环境准备 protoc和protoc-gen-go插件安装和kratos工具安装 protoc下载 下载二进制文件:https://github.com/protocolbuffers/protobu…...
等保2.0安全计算环境解读
等保2.0,即网络安全等级保护2.0制度,是中国为了适应信息技术的快速发展和安全威胁的新变化而推出的网络安全保护标准。相较于等保1.0,等保2.0更加强调主动防御、动态防御和全面审计,旨在实现对各类信息系统的全面保护。 安全计算环…...
Qt视频播放器(二)
文章目录 1. 安装FFmpeg库2. 创建Qt项目3. 配置项目文件CMakeLists.txt4. 实现核心FFmpeg功能`videoplayer.h``videoplayer.cpp`5. 实现QML界面`main.qml`6. 主函数`main.cpp`运行项目详细说明结合FFmpeg进行视频播放的核心部分,并使用QML进行界面设计,您可以实现一个功能强大…...
普元EOS学习笔记-创建精简应用
前言 本文依旧基于EOS8.3进行描述。 在上一篇文章《EOS8.3精简版安装》中,我们了解到普元预编译好的EOS的精简版压缩包,安装后,只能进行低开,而无法高开。 EOS精简版的高开方式是使用EOS开发工具提供的IDE,创建一个…...
观察者模式在金融业务中的应用及其框架实现
引言 观察者模式(Observer Pattern)是一种行为设计模式,它定义了一种一对多的依赖关系,使得多个观察者对象同时监听某一个主题对象。当这个主题对象发生变化时,会通知所有观察者对象,使它们能够自动更新。…...
最新docker仓库镜像
目前下面的docker仓库镜像源还能使用。 vi /etc/docker/daemon.json添加如下配置{"registry-mirrors": ["https://hub.uuuadc.top", "https://docker.anyhub.us.kg", "https://dockerhub.jobcher.com", "https://dockerhub.icu&…...
springboot 3.x相比之前版本有什么区别
Spring Boot 3.x相比之前的版本(尤其是Spring Boot 2.x),主要存在以下几个显著的区别和新特性: Java版本要求: Spring Boot 3.x要求至少使用Java 17作为最低版本,同时已经通过了Java 19的测试,…...
Python逻辑控制语句 之 判断语句--if语句的基本结构
1.程序执行的三大流程 顺序 分支(判断) 循环 2.if 语句的介绍 单独的 if 语句,就是 “如果 条件成⽴,做什么事” 3.if 语句的语法 if 判断条件: 判断条件成立,执行的代码…...
LeetCode 算法:翻转二叉树 c++
原题链接🔗:翻转二叉树 难度:简单⭐️ 题目 给你一棵二叉树的根节点 root ,翻转这棵二叉树,并返回其根节点。 示例 1: 输入:root [4,2,7,1,3,6,9] 输出:[4,7,2,9,6,3,1] 示例 …...
七天速通javaSE:第五天 数组进阶
文章目录 前言一、二维数组二、Arrays类1.toString打印数组内各元素1.1 示例1.2 自己实现内部逻辑 2. sort升序排列3. fill数组填充(重新赋值)4.equals比较数组元素是否相等 三、冒泡排序 前言 本文将学习二维数组、arrays类以及冒泡排序 一、二维数组 …...
游戏心理学Day28
独立游戏团队架构 独立游戏工作室是一个包括编程美术设计院校项目管理和运营等各种职能的团队找到可以共同奋斗。数月甚至数年的合适人选并不是一件容易的事情。游戏开发过程中要涉及多种常规工作。小团队的每个成员通常都要身兼数职,而且有些角色常由多人担任。 …...
无法与IP建立连接,未能下载VSCode服务器
如题,在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈,发现是VSCode版本自动更新惹的祸!!! 在VSCode的帮助->关于这里发现前几天VSCode自动更新了,我的版本号变成了1.100.3 才导致了远程连接出…...
渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中,接口是一种抽象类型,它定义了一组方法的集合: // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的: // 矩形结构体…...
MVC 数据库
MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展,光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域,IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选,但在长期运行中,例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
多模态大语言模型arxiv论文略读(108)
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题:CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者:Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中,提示一个依赖外部头文件的cpp源文件需要同步,点…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
