JavaScript中怎么将表单数据快速组装成符合RESTful规范的JSON串-js教程-PHP中文网

最简洁方案是 formdata + object.fromentries()，再处理类型转换、复选框数组、开关布尔值、snake_case/嵌套结构映射及空值清理，最终 json.stringify 发送。

javascript中怎么将表单数据快速组装成符合restful规范的json串

直接用 FormData + Object.fromEntries() 最简洁，再稍作处理就能满足 RESTful 接口对 JSON 字段名、嵌套结构和空值的常见要求。

基础转换：表单元素 → 平坦 JSON 对象

现代浏览器支持一步转对象：

const form = document.querySelector('form');
const data = Object.fromEntries(new FormData(form));
// 自动忽略未填写的 input、select 空值（但注意：checkbox/radio 未选中不出现）

这得到的是键值均为字符串的扁平对象，适合多数简单 POST 场景。若需数字/布尔类型，后续可针对性转换。

处理常见表单类型（日期、复选框、开关）

原生 FormData 不自动识别类型，需手动增强：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

日期控件（type="date"）：值已是 YYYY-MM-DD 字符串，RESTful 接口通常直接接受，无需改
复选框组（name="tags" 多个同名 checkbox）：FormData 只保留最后一个值。应改用 new FormData(form).getAll('tags') 获取数组
开关（type="checkbox" 单个）：建议统一设 value="true"，未勾选时字段不存在，可补逻辑：data.active = 'active' in data

适配 RESTful 命名与嵌套结构

后端常要求字段名用 snake_case 或嵌套对象（如 user.name）。可在转换后映射：

const raw = Object.fromEntries(new FormData(form));
const payload = {
  user: {
    full_name: raw.fullName,
    email: raw.email,
  },
  tags: new FormData(form).getAll('tag'), // 复选框数组
  is_active: 'isActive' in raw, // 开关转布尔
};

也可封装通用映射规则，避免每个表单重复写。

发送前清理与校验（轻量级）

RESTful 接口通常拒收空字符串或 undefined 字段：

删掉值为空字符串、null、undefined 的字段：Object.keys(data).forEach(k => (data[k] == null || data[k] === '') && delete data[k])
数字字段强制转数：if (['age', 'price'].includes(key)) data[key] = Number(data[key])
最终用 JSON.stringify(payload) 发送，Content-Type 设为 application/json

不复杂但容易忽略细节，按需组合这几步，基本覆盖 90% 的 RESTful 表单提交场景。