FormDataEvent：formData 属性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

FormDataEvent 接口的只读属性 formData 包含 FormData 对象，该对象表示在事件触发时，表单中包含的数据。

值

一个 FormData 对象。

示例

js
// 获取对表单的引用
const formElem = document.querySelector("form");

// submit 处理器

formElem.addEventListener("submit", (e) => {
  // 在表单提交时，阻止默认行为
  e.preventDefault();

  // 构造 FormData 对象，用于触发 formdata 事件
  new FormData(formElem);
});

// 获得数据的 formdata 处理器

formElem.addEventListener("formdata", (e) => {
  console.log("formdata fired");

  // 从事件对象中获取表单数据
  let data = e.formData;
  for (const value of data.values()) {
    console.log(value);
  }

  // 通过 XHR 提交数据
  const request = new XMLHttpRequest();
  request.open("POST", "/formHandler");
  request.send(data);
});

规范

Specification
HTML Standard
# the-formdataevent-interface:dom-formdataevent-formdata-2

浏览器兼容性

BCD tables only load in the browser

参见