如何向服务端提交简单表单数据无需逐个按ID获取表单字段？

架构老林

2026-10-12

可用方案（无需逐个按ID获取表单元素）

方案1：FormData转JSON对象，适配Express JSON解析

你之前使用FormData遇到的解析问题是默认发送multipart/form-data格式导致的，只需将FormData转成普通JSON对象，指定application/json格式发送即可被Express的bodyParser.json()中间件正常解析：

const form = document.querySelector('#你的表单ID')
form.addEventListener('submit', async (e) => {
  e.preventDefault()
  // 直接基于表单实例生成FormData，依赖字段的name属性即可，无需配置ID
  const formData = new FormData(form)
  // 一行代码转普通JSON对象
  const allFormFields = Object.fromEntries(formData.entries())
  // 按需筛选需要提交的字段，无需逐个获取
  const submitFields = ['username', 'tel', 'address']
  const payload = Object.fromEntries(
    Object.entries(allFormFields).filter(([key]) => submitFields.includes(key))
  )
  // 发送请求
  await fetch('/接口地址', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  })
})

方案2：FormData转URLSearchParams，适配Express表单编码解析

如果服务端仅支持application/x-www-form-urlencoded格式，也可直接转换格式提交，Express开启express.urlencoded({ extended: true })中间件即可正常解析：

const form = document.querySelector('#你的表单ID')
form.addEventListener('submit', async (e) => {
  e.preventDefault()
  const formData = new FormData(form)
  const payload = new URLSearchParams(formData)
  // 按需删除不需要提交的字段
  payload.delete('不需要的字段名')
  await fetch('/接口地址', {
    method: 'POST',
    body: payload
  })
})