无插件FormData提交表单

之前，我们一直使用jQuery的Form插件自带的方法ajaxSubmit来提交表单。这种方法虽然简单易用，但依赖库，在移动端会产生较大的资源消耗。因此，我们转向使用FormData对象来提交表单，它原生支持，兼容性更好，而且资源消耗更少。

一、FormData对象

FormData对象是HTML5新增的接口，用于收集表单数据。它可以收集各种类型的数据，包括文本、文件、选择框的值等等。要创建一个FormData对象，我们可以使用以下代码：

const formData = new FormData();

二、通过HTML Form元素创建FormData对象

我们可以通过HTML Form元素来创建FormData对象。首先，我们需要获取Form元素：

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

然后，我们可以使用form. FormData()方法来创建FormData对象：

const formData = new FormData(form);

三、向FormData对象添加数据

我们可以使用formData. append()方法来向FormData对象添加数据。例如，要添加一个文本输入框的值，我们可以使用以下代码：

formData.append('name', 'John Doe');

要添加一个文件，我们可以使用以下代码：

formData.append('file', fileInput.files[0]);

四、使用Ajax提交FormData对象

我们可以使用Ajax来提交FormData对象。首先，我们需要创建一个XMLHttpRequest对象：

const xhr = new XMLHttpRequest();

然后，我们需要设置请求的URL和方法：

xhr.open('POST', '/submit_form.php');
xhr.setRequestHeader('Content-Type', 'multipart/form-data');

最后，我们可以使用xhr.send()方法来提交FormData对象：

xhr.send(formData);

五、处理响应

当服务器响应时，我们可以使用xhr.responseText来获取响应数据。例如，我们可以使用以下代码来显示响应数据：

xhr.onload = function() {
  if (xhr.status === 200) {
    alert(xhr.responseText);
  } else {
    alert('Error: ' + xhr.status);
  }
};

以上就是使用FormData对象提交表单的方法。这种方法简单易用，兼容性好，而且资源消耗更少。