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
独立游戏团队架构 独立游戏工作室是一个包括编程美术设计院校项目管理和运营等各种职能的团队找到可以共同奋斗。数月甚至数年的合适人选并不是一件容易的事情。游戏开发过程中要涉及多种常规工作。小团队的每个成员通常都要身兼数职,而且有些角色常由多人担任。 …...
【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
unix/linux,sudo,其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例,模拟20个网页的爬取,每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程:允许程序同时执行多个任务,提高IO密集型任务(如网络请求)的效率…...
多种风格导航菜单 HTML 实现(附源码)
下面我将为您展示 6 种不同风格的导航菜单实现,每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
AspectJ 在 Android 中的完整使用指南
一、环境配置(Gradle 7.0 适配) 1. 项目级 build.gradle // 注意:沪江插件已停更,推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
以光量子为例,详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学(silicon photonics)的光波导(optical waveguide)芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中,光既是波又是粒子。光子本…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
