HTML表单使用哪种请求API？如何查看及修改所用API？

1. HTML表单默认使用的请求API是XHR还是Fetch？ #

都不是。原生HTML表单提交是浏览器自带的机制，会直接触发页面跳转或刷新，不属于XHR（XMLHttpRequest）或Fetch API的范畴。只有通过JavaScript手动拦截表单提交事件，再主动调用XHR或Fetch发送请求时，才会用到这两个API。

2. 如何查看HTML表单发起HTTP请求时用的是哪种API？ #

有三种常用方法：

• 开发者工具Network面板：打开浏览器F12的Network标签，触发表单提交后，看请求的「Initiator」列：原生表单提交会显示HTMLFormElement或对应的表单DOM元素；如果是XHR/Fetch，会显示对应的JS文件路径或代码行号。
• 函数断点调试：在Sources面板中，给XMLHttpRequest或fetch设置函数断点，触发提交后如果断点命中，说明用了对应的API；没命中就是原生提交。也可以给表单的submit事件加监听断点，看是否有JS拦截并调用XHR/Fetch。
• 查看页面JS代码：搜索页面中的form.addEventListener('submit')或onsubmit属性，看有没有event.preventDefault()阻止默认行为，之后有没有调用XHR或Fetch的逻辑。

3. 能否修改HTML表单，让它改用XHR或Fetch？ #

完全可以，只需要用JS拦截原生提交，手动用目标API发送请求，示例如下：

改用Fetch API的示例 #

const form = document.querySelector('form');
form.addEventListener('submit', async (e) => {
  // 阻止原生表单提交
  e.preventDefault();
  // 收集表单数据
  const formData = new FormData(form);
  // 用Fetch发送请求
  try {
    const response = await fetch(form.action, {
      method: form.method,
      body: formData
    });
    // 处理响应（这里以JSON为例）
    const result = await response.json();
    console.log('请求结果:', result);
  } catch (err) {
    console.error('请求失败:', err);
  }
});

改用XHR的示例 #

const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(form);
  const xhr = new XMLHttpRequest();
  // 配置请求参数
  xhr.open(form.method, form.action);
  // 监听请求完成事件
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      const result = JSON.parse(xhr.responseText);
      console.log('请求结果:', result);
    } else {
      console.error('请求出错:', xhr.statusText);
    }
  };
  // 发送请求
  xhr.send(formData);
});

内容的提问来源于stack exchange，提问作者yokus