用 FormData 提交 textarea 更安全兼容，因其自动处理换行、中文、emoji 和 HTML 片段编码，后端可原样接收；而 JSON.stringify() 易导致转义异常、截断或后端无法解析。
直接用 fetch() + FormData 提交表格里的 textarea，比手动拼 JSON 更安全、更兼容——尤其当文本含换行、中文、emoji 或富文本 HTML 片段时，FormData 会自动处理编码，后端也能原样接收。
为什么不能直接把 textarea 值塞进 JSON.stringify()
很多初学者写 fetch() 时习惯先遍历表单字段、构造 JS 对象、再 JSON.stringify() 发送。但 textarea 的换行符（\n）、制表符、不可见 Unicode 字符在 JSON 序列化中容易被截断或转义异常；更麻烦的是，如果后端用 $_POST（PHP）或 @RequestParam（Spring）接收，它根本收不到 JSON body——只认 application/x-www-form-urlencoded 或 multipart/form-data 格式。
常见错误现象：
- 提交后后端收到空字符串或乱码
- 换行全部变成空格或丢失
- 含中文的
textarea在 PHP 中显示为 - 浏览器 Network 面板里请求体是 raw JSON，但响应头
Content-Type是text/html，导致 0MB 下载
FormData 怎么正确收集 textarea 和其他字段
只要表单元素有 name 属性，new FormData(formEl) 就能自动提取值，包括 textarea、input[type=text]、select、checkbox（勾选时才包含）——无需手动 .value 取值，也无需担心编码。
实操建议：
- 确保每个
textarea都有name="xxx"，比如 - 不要给
form设enctype="application/json"—— 这个属性根本不存在，浏览器会忽略 - 用
event.preventDefault()阻止默认提交，否则页面跳转 + 重复发送 - 如果表单里混有文件上传，
FormData依然可用，且不用手动设Content-Type（浏览器自加boundary）
示例代码片段：
const form = document.getElementById('myForm');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(form); // 自动包含所有带 name 的 textarea/input
try {
const res = await fetch('/api/submit', { method: 'POST', body: formData });
const data = await res.json();
console.log(data);
} catch (err) {
console.error('提交失败:', err);
}
});
后端怎么接住这个 textarea 数据
关键不是“怎么解析”，而是“别强行当 JSON 解”。FormData 发出的请求，默认是 Content-Type: multipart/form-data（有文件时）或 application/x-www-form-urlencoded（纯文本时）。后端必须按对应方式读取：
- PHP：直接用
$_POST['comment']，别读php://input - Node.js（Express）：确保用了
express.urlencoded({ extended: true })中间件 - Spring Boot：用
@RequestParam String comment，别用@RequestBody - Python Flask：用
request.form.get('comment')，不是request.get_json()
如果你硬要用 JSON.stringify() 发送，后端就必须显式读原始 body 并 JSON 解析——但这就放弃了 textarea 的天然兼容性，还额外增加 XSS 风险（比如用户贴了一段带 <script></script> 的富文本）。
提交后页面没反应？检查这三点
异步提交最常卡在“看起来没动静”，其实请求已发出去，只是没反馈。重点排查：
- 按钮没禁用，用户狂点 → 加
form.querySelector('button').disabled = true，成功/失败后再恢复 - 后端返回了非
200状态码（如500），但前端没检查response.ok→if (!res.ok) throw new Error(res.status) - 服务器响应头漏了
Content-Type: application/json，导致res.json()报错 → 改用res.text()先看原始响应内容
真正容易被忽略的，是后端返回空响应体却没设 Content-Type —— 浏览器会把它当成未知类型，触发 0MB 文件下载，而控制台可能连错误都不报。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
