JavaScript实现异步获取表单数据

JavaScript实现异步获取表单数据的过程可以使用XMLHttpRequest对象和Promise对象实现，以下是具体步骤：

1. 获取表单DOM元素

在页面中获取表单DOM元素，可以使用document.querySelector或者document.getElementById等方法获取表单元素。

const form = document.querySelector('#form');

1. 监听表单提交事件

在表单元素上添加submit事件监听器，当用户提交表单时触发该事件。

form.addEventListener('submit', handleSubmit);

1. 阻止表单默认提交

在submit事件回调函数中调用preventDefault方法，阻止表单默认的提交行为。

function handleSubmit(e) {
  e.preventDefault();
}

1. 创建XMLHttpRequest对象

在handleSubmit函数中创建XMLHttpReequest对象，使用该对象向服务器发送请求，并异步获取数据。

function handleSubmit(e) {
  e.preventDefault();

  const xhr = new XMLHttpRequest();
}

1. 打开请求并设置请求头

在XMLHttpRequest对象上调用open方法，设置请求方法和请求地址，再设置请求头。

function handleSubmit(e) {
  e.preventDefault();

  const xhr = new XMLHttpRequest();

  xhr.open('POST', '/api/form', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
}

1. 将表单数据序列化为JSON字符串

使用FormData对象获取表单数据，将其转换为JSON字符串，并作为请求体发送到服务器。

function handleSubmit(e) {
  e.preventDefault();

  const formData = new FormData(form);
  const data = [...formData.entries()];
  const json = JSON.stringify(Object.fromEntries(data));

  const xhr = new XMLHttpRequest();

  xhr.open('POST', '/api/form', true);
  xhr.setRequestHeader('Content-Type', 'application/json');

  xhr.send(json);
}

1. 使用Promise对象处理异步请求结果

在XMLHttpRequest对象上调用onload方法，当请求成功后触发该事件，并使用Promise对象处理异步请求结果。

function handleSubmit(e) {
  e.preventDefault();

  const formData = new FormData(form);
  const data = [...formData.entries()];
  const json = JSON.stringify(Object.fromEntries(data));

  const xhr = new XMLHttpRequest();

  xhr.open('POST', '/api/form', true);
  xhr.setRequestHeader('Content-Type', 'application/json');

  xhr.onload = () => {
    if (xhr.status >= 200 && xhr.status < 300) {
      const response = JSON.parse(xhr.responseText);
      Promise.resolve(response);
    } else {
      Promise.reject(`请求错误：${xhr.status}`);
    }
  };

  xhr.send(json);
}

下面是使用Promise对象实现异步获取表单数据的完整代码示例：

const form = document.querySelector('#form');

form.addEventListener('submit', handleSubmit);

function handleSubmit(e) {
  e.preventDefault();

  const formData = new FormData(form);
  const data = [...formData.entries()];
  const json = JSON.stringify(Object.fromEntries(data));

  const xhr = new XMLHttpRequest();

  xhr.open('POST', '/api/form', true);
  xhr.setRequestHeader('Content-Type', 'application/json');

  xhr.onload = () => {
    if (xhr.status >= 200 && xhr.status < 300) {
      const response = JSON.parse(xhr.responseText);
      Promise.resolve(response);
    } else {
      Promise.reject(`请求错误：${xhr.status}`);
    }
  };

  xhr.send(json);
}

另一个示例是使用fetch函数异步获取表单数据，具体步骤如下：

1. 获取表单DOM元素

const form = document.querySelector('#form');

1. 监听表单提交事件

form.addEventListener('submit', handleSubmit);

1. 阻止表单默认提交

function handleSubmit(e) {
  e.preventDefault();
}

1. 获取表单数据并发送请求

使用fetch函数异步获取表单数据，并作为请求体发送到服务器。

function handleSubmit(e) {
  e.preventDefault();

  const formData = new FormData(form);
  const data = [...formData.entries()];
  const json = JSON.stringify(Object.fromEntries(data));

  fetch('/api/form', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: json
  })
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      Promise.reject(`请求错误：${response.status}`);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });
}

在上面的代码中，使用fetch函数发送异步请求，并使用Promise对象处理异步请求结果。如果请求成功，使用response.json()方法将响应数据解析为JSON格式，如果请求失败，使用Promise.reject()方法抛出错误信息。最后，使用then()方法处理成功回调和catch()方法处理失败回调。