西宁 网站建设石家庄百度推广总代理
本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！
大家好，我是大澈！
本文约 800+ 字，整篇阅读约需 1 分钟。
今天分享一段优质 JS 代码片段，在发送 ajax 请求时确保中文参数值被正确解析。
老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！
const params = new URLSearchParams();
params.append('name', encodeURIComponent('张三'));// 使用 Fetch API 发送 POST 请求
fetch('https://example.com/api', {method: 'POST',body: params,headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
})
分享原因
这段代码展示了如何使用 URLSearchParams 对象来构建 URL 编码的查询字符串，同时使用 encodeURIComponent 函数来确保参数值中的特殊字符被正确编码。
如果数据是以 JSON 格式传输，那么中文字符不需要额外的编码和解码步骤，因为 JSON 已经包含了对 Unicode 字符的支持。
但如果不是 JSON 格式传输，中文字符就必须用 encodeURIComponent 函数做编码处理，然后在服务端用 decodeURIComponent 做解码处理。
否则，就会出现乱码现象，无法获取正确的中文值。
代码解析
1. const params = new URLSearchParams();
URLSearchParams 主要用于处理 URL 中的查询字符串部分。
它提供了一系列方法来方便地操作查询参数。
一般我都会把 URLSearchParams 与 FormData 一起学习：
FormData 通常用于表单数据的提交，特别是在进行 XMLHttpRequest 或 fetch 请求时。
URLSearchParams 通常在发送数据时，Content-Type 默认为 application/x-www-form-urlencoded 。
FormData 在发送数据时，Content-Type 会根据数据的内容自动设置。
如果包含文件，通常为 multipart/form-data ；如果只是普通的表单字段数据，可能是 application/x-www-form-urlencoded 。
2. params.append('name', encodeURIComponent('张三'));
params.append 方法用于向 URLSearchParams 对象中添加一个键值对。
name 是参数的键。
encodeURIComponent('张三') 是参数的值。
encodeURIComponent 函数用于对 URI 组件（例如查询字符串中的参数值）进行编码，将一些特殊字符转换为可在 URI 中安全传输的形式。
它会对以下字符进行编码：; 、/ 、? 、: 、@ 、& 、= 、+ 、$ 、, 、# 以及所有非 ASCII 字符。
decodeURIComponent 函数则执行相反的操作，将经过 encodeURIComponent 编码的字符串还原为原始的字符串。