Javascript提高:get和post等请求,对于汉字和空格信息进行编码的原则-由Deepseek产生

为什么必须编码?

HTTP 协议规定 URL 中只能包含 ASCII 字符,非 ASCII 字符(如汉字)和保留字符(如空格、&、= 等)必须进行 百分号编码(URL encoding),否则:

  • 空格会被服务器误认为分隔符或被截断
  • 汉字可能被解析为乱码,甚至导致请求失败
  • 参数分隔符(&、=)会被误认为结构符号,破坏参数结构

不同场景的编码规则

1. GET 请求(URL 查询字符串)

必须编码 。

例如,将 name=张三 city=北京 拼接到 URL 中:

javascript 复制代码
// 错误(未编码)
fetch('/api?name=张三&city=北京')   // 可能无法正确解析

// 正确
const name = encodeURIComponent('张三');
const city = encodeURIComponent('北京');
fetch(`/api?name=${name}&city=${city}`);

编码后:

复制代码
/api?name=%E5%BC%A0%E4%B8%89&city=%E5%8C%97%E4%BA%AC

2. POST 请求(application/x-www-form-urlencoded)

必须编码 。

这是表单默认的编码格式,参数以 key=value 形式放在请求体中,同样要求 URL 编码。

javascript 复制代码
// 使用 URLSearchParams 自动编码
const body = new URLSearchParams();
body.append('name', '张三');
body.append('city', '北京');

fetch('/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: body
});

实际发送的 body 为:

复制代码
name=%E5%BC%A0%E4%B8%89&city=%E5%8C%97%E4%BA%AC

3. POST 请求(multipart/form-data,常用于文件上传)

不需要手动编码 。

浏览器会自动处理每个字段的编码(包含汉字和空格),且二进制数据原样传输。

javascript 复制代码
const formData = new FormData();
formData.append('name', '张三 李四');  // 空格保留
formData.append('file', fileInput.files[0]);

fetch('/api', {
  method: 'POST',
  body: formData   // 浏览器自动设置 Content-Type 并编码
});

4. POST 请求(application/json)

不需要编码 。

JSON 本身支持 Unicode,汉字和空格直接作为字符串传输。

javascript 复制代码
fetch('/api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: '张三 李四' })
});

库的自动处理

  • Axios :默认对 params(GET 参数)和 application/x-www-form-urlencoded 的 data 自动编码。
  • jQuery AJAX :$.ajax 的 data 对象会被自动编码(若未指定 contentType: false)。
  • Fetch :URLSearchParams 和 FormData 会编码,但手动拼接 URL 需自己调用 encodeURIComponent。
  • XHR :手动拼接时需调用 encodeURIComponent。

总结

请求类型 数据位置 格式 是否必须编码 说明
GET URL 查询字符串(query string) ✅ 必须 所有非 ASCII 和保留字符都需百分号编码
POST Body application/x-www-form-urlencoded ✅ 必须 同 GET 规则
POST Body multipart/form-data ❌ 不需要 浏览器自动处理,各字段独立边界分隔
POST Body application/json ❌ 不需要 JSON 原生支持 Unicode

最佳实践 :永远不要手动拼接 URL 参数而不编码。使用现代库或 URLSearchParams 等 API 让浏览器/库自动处理。

相关推荐
panxianren12 小时前
Bun 1.4 的 bun test --parallel 将 4 秒的测试套件缩短到约 1 秒
java·javascript
“AI国潮设计-小江”14 小时前
《Python+SDXL实战:用ControlNet精准控制“英歌舞翻糖吐司”构图,附批量生成脚本》
开发语言·人工智能·python·prompt·aigc
程序喵大人14 小时前
【C++入门】编译链接模型 - 01 一个 C++ 程序是怎样变成可执行文件的
开发语言·c++·编译链接模型
陈随易14 小时前
bm2,Node.js 与 Bun 项目部署新选择
前端·后端·程序员
可乐鸡翅yeah_15 小时前
FFmpeg 生成 HLS 独立分片 independent‑segments 参数到底有什么用
javascript·ffmpeg·音视频·safari·m3u8
sunshine22 girl15 小时前
Java学习七 Java 项目实战1-项目创建和主页面搭建
java·开发语言·学习
福兮说15 小时前
canvas 旋转图片的六个坑:四角被裁、Math.ceil 多出 1px 黑边、JPG 角发黑、翻转方向反了
前端·javascript·图像处理·canvas
菜鸟~noob23316 小时前
【电子战】第三季预告—波武器与电子系统强力毁伤
开发语言·数据库·matlab·电子战
Ai-_Man17 小时前
您您这可以把Grok的多个会话比如说。左侧的多个会话一次性导出吗?不是单条会话里面的多次会对话。AI导出鸭
javascript·人工智能·ai·小程序·电脑
惊讶的猫17 小时前
工具选对之后还不够:商城 Agent 的参数与权限治理
开发语言·python