HTML5表单提交方式全解析

用 fetch() + event.preventDefault() 实现无刷新提交

这是当前最主流、兼容性足够（Chrome 42+、Firefox 39+、Safari 10.1+）的纯前端方案。关键在于拦截原生提交，并手动构造请求。

• 必须在 submit 事件监听器中调用 event.preventDefault()，否则页面仍会跳转
• FormData 对象能自动收集 内所有带 name 的控件值，包括
• 注意 fetch() 默认不发 cookie，如需登录态，得显式加 credentials: 'include'

document.querySelector('form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  try {
    const res = await fetch(this.action, {
      method: this.method || 'GET',
      body: this.method === 'GET' ? undefined : formData,
      credentials: 'include'
    });
    const data = await res.json();
    console.log('提交成功:', data);
  } catch (err) {
    console.error('提交失败:', err);
  }
});

formaction 和 formmethod 属性让单页多提交成为可能

HTML5 新增的这几个属性允许按钮覆盖 的全局 action 和 method，适合一个表单对应多个操作场景（如“保存草稿”和“正式提交”）。

• 只对 或 生效
• 值为相对 URL 时，以当前页面为基准解析，不是以 的 action 为基准
• 若按钮没写 formmethod，则继承 的 method；但若写了空字符串 formmethod=""，浏览器行为不一致（Chrome 当作 get，Firefox 报错），应避免

  
  存草稿
  发布