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
# the-formdataevent-interface:dom-formdataevent-formdata-2

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
formData

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见