FormData无法直接序列化表格内的textarea，因其只识别form元素内具有name属性的“成功控件”；表格非表单容器，控件若未嵌套在form中则被忽略，需手动通过选择器提取并构造键值对。
为什么不能直接用 FormData 序列表格里的 textarea
因为 FormData 只认 form 元素内部的“成功控件”，而表格（table）本身不是表单容器——哪怕你把 textarea 塞进 tr 或 td 里，只要它没被包在 form 标签内，FormData(form) 就根本找不到它。
更常见的情况是：表格用于布局，实际输入控件散落在各单元格中，没有统一 form 父级。这时调用 new FormData(document.querySelector('form')) 会直接返回空对象或漏掉全部字段。
手动提取表格内所有 textarea 和输入控件的通用写法
核心思路是绕过 form 依赖，用 CSS 选择器定位目标区域，再逐个读取值。适用于表格作为 UI 布局、但需批量收集数据的场景（如配置项编辑表、动态参数表）：
- 给表格加唯一标识，比如
<table id="config-table"> <li>用 <code>document.querySelectorAll('#config-table textarea, #config-table input, #config-table select')拿到全部控件 - 过滤掉
disabled、无name属性、或type="button"/type="reset"等非数据控件 - 对每个控件：
-
textarea和select直接取.value -
input[type="checkbox"]或[type="radio"]只取checked === true的.value，否则跳过（或按需补false） -
select[multiple]需用Array.from(el.selectedOptions).map(o => o.value)提取数组
-
URLSearchParams 和 Object.fromEntries 能不能直接用？
可以，但必须先构造合法的键值对数组。不能直接传 NodeList 给 URLSearchParams —— 它只接受 FormData、URLSearchParams 实例或二维数组。
正确做法是先收集为 entries：
const entries = [];
document.querySelectorAll('#config-table [name]').forEach(el => {
if (el.disabled || !el.name) return;
if (el.tagName === 'TEXTAREA' || el.tagName === 'SELECT') {
entries.push([el.name, el.value]);
} else if (el.type === 'checkbox' && el.checked) {
entries.push([el.name, el.value]);
} else if (['text', 'hidden', 'number', 'email'].includes(el.type)) {
entries.push([el.name, el.value]);
}
});
const params = new URLSearchParams(entries);
console.log(params.toString()); // name=abc&desc=xxx
表格中同名 name 字段怎么不被覆盖？
HTML 表单规范里，同名字段默认会被后一个覆盖；但表格里常出现多行同名输入（如每行一个 price），这时靠原生机制不行，得手动处理成数组：
- 给每行控件加索引，比如
name="item[0].price"、name="item[1].price"，后端解析时按结构收 - 或前端聚合：遍历所有
[name="price"]，用Array.from()收集值，再JSON.stringify()后塞进一个隐藏字段 - 避免用纯
name="price"多次出现——URLSearchParams和FormData都只会保留最后一个
真正容易被忽略的是：表格里 textarea 的换行符在序列化后可能被当成普通空格或丢失，提交前建议用 encodeURIComponent 包一层再拼接，尤其当后端用 x-www-form-urlencoded 解析时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
