当前位置: 首页 > article >正文

js中encodeURIComponent函数使用场景

encodeURIComponent 是 JavaScript 中的一个内置函数,它的作用是:

将字符串编码为可以安全放入 URL 的形式。

✅ 为什么需要它?
URL 中有一些字符是有特殊意义的,比如:
? 用来开始查询参数
& 分隔多个参数
= 连接键和值
空格、中文、特殊符号等等也不能直接放在 URL 中
如果你直接拼接这些字符到 URL 中,浏览器会无法正确识别或者出错。

原始字符串:

var name = "张三&李四";
var token = "abc=123?token";

不编码的结果(拼 URL):

/user/info?name=张三&李四&token=abc=123?token

⚠️ 这会导致 URL 被错误地解析,参数分隔混乱。

✅ 用 encodeURIComponent 编码:

var url = "/user/info?name=" + encodeURIComponent(name) + "&token=" + encodeURIComponent(token);

编码后的结果:

/user/info?name=%E5%BC%A0%E4%B8%89%26%E6%9D%8E%E5%9B%9B&token=abc%3D123%3Ftoken

现在这个 URL 就安全可传输,浏览器和服务器都能正确解码回原文。

✅ 解码(如果需要)
配套的解码函数是 decodeURIComponent(),用来将编码后的字符串还原回原始内容。

var original = decodeURIComponent("%E5%BC%A0%E4%B8%89");
// original = "张三"

总结
encodeURIComponent() 是用来把字符串转成可以安全放在 URL 参数中的格式,防止出错,是构造 URL 查询字符串时的标准做法。

✅ 服务端:通常会自动解码
几乎所有主流后端框架都会自动解码 URL 参数:

后端语言框架会自动解码?
Node.jsExpress, Koa✅ 是
PythonFlask, Django✅ 是
JavaSpring MVC✅ 是
PHP原生 / Laravel✅ 是
Gonet/http✅ 是

相关文章:

js中encodeURIComponent函数使用场景

encodeURIComponent 是 JavaScript 中的一个内置函数,它的作用是: 将字符串编码为可以安全放入 URL 的形式。 ✅ 为什么需要它? URL 中有一些字符是有特殊意义的,比如: ? 用来开始查询参数 & 分隔多个参数 连接…...

iOS工厂模式

iOS工厂模式 文章目录 iOS工厂模式简单工厂模式(Simple Factory)工厂方法模式(Factory Method)抽象工厂模式(Abstract Factory)三种模式对比 简单工厂模式(Simple Factory) 定义&am…...

【数据库】-1 mysql 的安装

文章目录 1、mysql数据库1.1 mysql数据库的简要介绍 2、mysql数据库的安装2.1 centos安装2.2 ubuntu安装 1、mysql数据库 1.1 mysql数据库的简要介绍 MySQL是一种开源的关系型数据库管理系统(RDBMS),由瑞典MySQL AB公司开发,目前…...

【缓存】JAVA本地缓存推荐Caffeine和Guava

🌟 引言 在软件开发过程中,缓存是提升系统性能的常用手段。对于基础场景,直接使用 Java集合框架(如Map/Set/List)即可满足需求。然而,当面对更复杂的缓存场景时: 需要支持多种过期策略&#x…...

Prometheus的服务命令和配置文件

一、Prometheus的服务端命令和启动方式 1.服务端命令(具体详情可以--help查看) --config.file“prometheus.yml”指定配置文件,默认是当前目录下的prometheus.yml--web.listen-address"0.0.0.0:9090"web页面的地址与端口&#xf…...

物流项目第五期(运费计算实现、责任链设计模式运用)

前四期: 物流项目第一期(登录业务)-CSDN博客 物流项目第二期(用户端登录与双token三验证)-CSDN博客 物流项目第三期(统一网关、工厂模式运用)-CSDN博客 物流项目第四期(运费模板列…...

前端JavaScript-嵌套事件

点击 如果在多层嵌套中&#xff0c;对每层都设置事件监视器&#xff0c;试试看 <!DOCTYPE html> <html lang"cn"> <body><div id"container"><button>点我&#xff01;</button></div><pre id"output…...

X 下载器 2.1.42 | 国外媒体下载工具 网页视频嗅探下载

X 下载器让你能够轻松地从社交应用如Facebook、Instagram、TikTok等下载视频和图片。通过内置浏览器访问网站&#xff0c;它能自动检测视频和图片&#xff0c;只需点击下载按钮即可完成下载。去除广告&#xff0c;解锁本地会员&#xff0c;享受无广告打扰的下载体验。 大小&am…...

STM32 CAN CANAerospace

STM32的CAN模块对接CANAerospace 刚开始报错如下. 设备开机后整个CAN消息就不发了. USB_CAN调试器报错如下. index time Name ID Type Format Len Data00000001 000.000.000 Event 总线错误 DATA STANDARD 8 接收过程错误-格…...

完整改进RIME算法,基于修正多项式微分学习算子Rime-ice增长优化器,完整MATLAB代码获取

1 简介 为了有效地利用雾状冰生长的物理现象&#xff0c;最近开发了一种优化算法——雾状优化算法&#xff08;RIME&#xff09;。它模拟硬雾状和软雾状过程&#xff0c;构建硬雾状穿刺和软雾状搜索机制。在本研究中&#xff0c;引入了一种增强版本&#xff0c;称为修改的RIME…...

服务器安装xfce桌面环境并通过浏览器操控

最近需要运行某个浏览器的脚本&#xff0c;但是服务器没有桌面环境&#xff0c;无法使用&#xff0c;遂找到了KasmVNC&#xff0c;并配合xfce实现低占用的桌面环境&#xff0c;可以直接使用浏览器进行操作 本文基于雨云——新一代云服务提供商的Debian11服务器操作&#xff0c;…...

Java设计模式之组合模式:从入门到精通(保姆级教程)

文章目录 1. 组合模式概述1.1 专业定义1.2 通俗解释1.3 模式结构2. 组合模式详细解析2.1 模式优缺点2.2 适用场景3. 组合模式实现详解3.1 基础实现3.2 代码解析4. 组合模式进阶应用4.1 透明式 vs 安全式组合模式4.2 组合模式与递归4.3 组合模式与迭代器5. 组合模式在实际开发中…...

Oracle 创建外部表

找别人要一下数据&#xff0c;但是他发来一个 xxx.csv 文件&#xff0c;怎么办&#xff1f; 1、使用视图化工具导入 使用导入工具导入&#xff0c;如 DBeaver&#xff0c;右击要导入的表&#xff0c;选择导入数据。 选择对应的 csv 文件&#xff0c;下一步就行了&#xff08;如…...

大语言模型 17 - MCP Model Context Protocol 介绍对比分析 基本环境配置

MCP 基本介绍 官方地址&#xff1a; https://modelcontextprotocol.io/introduction “MCP 是一种开放协议&#xff0c;旨在标准化应用程序向大型语言模型&#xff08;LLM&#xff09;提供上下文的方式。可以把 MCP 想象成 AI 应用程序的 USB-C 接口。就像 USB-C 提供了一种…...

【软考向】Chapter 9 数据库技术基础

基本概念数据库的三级模式结构 数据模型E-R 模型关系模型各种键完整性约束 关系代数5 种基本的关系代数运算&#xff1a;并、差、笛卡儿积、投影和选择扩展的关系代数运算&#xff1a;交(Intersection)、连接(Join)、除(Division)、广义投影(Generalized Projection)、外连接(O…...

实战:Dify智能体+Java=自动化运营工具!

我们在运营某个圈子的时候&#xff0c;可能每天都要将这个圈子的“热门新闻”发送到朋友圈或聊天群里&#xff0c;但依靠传统的实现手段非常耗时耗力&#xff0c;我们通常要先收集热门新闻&#xff0c;再组装要新闻内容&#xff0c;再根据内容设计海报等。 那怎么才能简化并高…...

STM32单片机GUI系统1 GUI基本内容

目录 一、GUI简介 1、emWin 2、LVGL (Light and Versatile Graphics Library) 3、TouchGFX 4、Qt for Embedded 5、特性对比总结 二、LVGL移植要求 三、优化LVGL运行效果方法 四、LVGL系统文件 一、GUI简介 在嵌入式系统中&#xff0c;emWin、LVGL、TouchGFX 和 Qt 是…...

从零开始学习three.js(21):一文详解three.js中的矩阵Matrix和向量Vector

一、三维世界的数学基石 在Three.js的三维世界里&#xff0c;所有视觉效果的实现都建立在严密的数学基础之上。其中向量&#xff08;Vector&#xff09; 和矩阵&#xff08;Matrix&#xff09; 是最核心的数学工具&#xff0c;它们就像构建数字宇宙的原子与分子&#xff0c;支…...

应届本科生简历制作指南

一、找一个专业的简历模板 首先&#xff0c;你需要访问 Overleaf 的官方网站&#xff0c;也就是Overleaf, Online LaTeX Editor&#xff0c;进入页面后&#xff0c;点击注册按钮&#xff0c;按照提示填写相关信息来创建一个属于自己的账号&#xff0c;通常需要填写用户名、邮箱…...

VUE3+TS实现图片缩放移动弹窗

完整代码 使用VUE3、TS&#xff0c;实现将图片通过鼠标拖拽缩放以及选择缩放比例。 <template><div><el-dialogv-model"dialogVisible"title"查看图片":close-on-click-modal"false":close-on-press-escape"false"fu…...

大语言模型训练数据格式:Alpaca 和 ShareGPT

在大规模语言模型&#xff08;LLM&#xff09;的开发中&#xff0c;训练数据的质量和格式起着至关重要的作用。为了更好地理解和构建高质量的数据集&#xff0c;社区发展出了多种标准化的数据格式。其中&#xff0c;Alpaca 和 ShareGPT 是两种广泛使用的训练数据格式&#xff0…...

实现动态增QuartzJob,通过自定义注解调用相应方法

:::tip 动态增加Quartz定时任务&#xff0c;通过自定义注解来实现具体的定时任务方法调用。 ::: 相关依赖如下 <!-- 用来动态创建 Quartz 定时任务 --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-start…...

PyTorch可视化工具——使用Visdom进行深度学习可视化

文章目录 前置环境Visdom安装并启动VisdomVisdom图形APIVisdom静态更新API详解通用参数说明使用示例Visdom动态更新API详解1. 使用updateappend参数2. ~~使用vis.updateTrace方法~~3. 完整训练监控示例 Visdom可视化操作散点图plot.scatter()散点图案例线性图vis.line()vis.lin…...

Qt无边框界面添加鼠标事件

在Qt中实现无边框窗口的鼠标事件处理&#xff0c;主要涉及窗口拖动和调整大小功能。以下是分步实现的代码示例&#xff1a; 1. 创建无边框窗口 首先&#xff0c;创建一个继承自QWidget的自定义窗口类&#xff0c;并设置无边框标志&#xff1a; #include <QWidget> #in…...

企业级爬虫进阶开发指南

企业级爬虫进阶开发指南 一、分布式任务调度系统的深度设计 1.1 架构设计原理 图表 1.2 核心代码实现与注释 分布式锁服务 # distributed_lock.py import redis import timeclass DistributedLock:def __init__(self, redis_conn):self.redis = redis_connself.lock_key = …...

Ubuntu ping网络没有问题,但是浏览器无法访问到网络

我这边是尝试清楚DNS缓存然后重新访问就可以了。 使用 resolvectl 刷新 DNS 缓存 在 Ubuntu 20.04 及更高版本中&#xff0c;可以使用以下命令来刷新 DNS 缓存&#xff1a; sudo resolvectl flush-caches 使用 systemd-resolve&#xff08;适用于旧版本&#xff09; 如果你…...

网络安全-等级保护(等保) 2-7 GB/T 25058—2019 《信息安全技术 网络安全等级保护实施指南》-2019-08-30发布【现行】

################################################################################ GB/T 22239-2019 《信息安全技术 网络安全等级保护基础要求》包含安全物理环境、安全通信网络、安全区域边界、安全计算环境、安全管理中心、安全管理制度、安全管理机构、安全管理人员、安…...

数据结构实验10.1:内部排序的基本运算

文章目录 一&#xff0c;实验目的二&#xff0c;实验内容1. 数据生成与初始化2. 排序算法实现&#xff08;1&#xff09;直接插入排序&#xff08;2&#xff09;二分插入排序&#xff08;3&#xff09;希尔排序&#xff08;4&#xff09;冒泡排序&#xff08;5&#xff09;快速…...

C#:多线程

一.线程常用概念 线程&#xff08;Thread&#xff09;&#xff1a;操作系统执行程序的最小单位 进程&#xff08;Process&#xff09;&#xff1a;程序在内存中的运行实例 并发&#xff08;Concurrency&#xff09;&#xff1a;多个任务交替执行&#xff08;单核CPU&#xff0…...

基于Zynq SDK的LWIP UDP组播开发实战指南

一、为什么选择LWIP组播? 在工业控制、智能安防、物联网等领域,一对多的高效数据传输需求日益增长。Zynq-7000系列SoC凭借其ARM+FPGA的独特架构,结合LWIP轻量级网络协议栈,成为嵌入式网络开发的理想选择。本文将带您实现: LWIP组播配置全流程动态组播组切换技术零拷贝数据…...