js表单提交的几种方式

在现代web开发中，表单是一个常见的组件，用户在表单中输入信息后，需要将这些信息提交给服务器进行处理。在提交表单时，我们可以使用多种方式来实现数据的传递。在本文中，我们将介绍几种常用的js表单提交方式，并对它们进行比较。

在表单元素上绑定submit事件

这是最常用的一种方式，即在表单元素上绑定submit事件，当用户在表单上点击提交按钮时，浏览器会自动触发表单的submit事件，我们可以在该事件中编写js代码来实现表单的提交操作，示例代码如下：

const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单的提交行为
  const formData = new FormData(form);
  fetch('/submit', {
    method: 'POST',
    body: formData
  }).then(response => {
    // do something
  });
});

通过此方法提交表单时，我们需要手动阻止表单的默认提交行为，因为如果不阻止，浏览器会自动刷新页面并进行表单提交。另外，该方式提交的表单数据格式为multipart/form-data，可以方便的上传文件，但由于采用了二进制编码，数据量较大。

异步提交表单

异步提交表单是一种更加灵活的方式，它允许我们在不刷新页面的情况下提交表单，适用于数据量较小的场景。我们可以借助于XMLHttpRequest或fetch等API来实现异步提交。示例代码如下：

const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单的默认提交行为
  const formData = new FormData(form);
  fetch('/submit', {
    method: 'POST',
    body: formData
  }).then(response => {
    // do something
  });
});

和上一种方法类似，我们需要阻止表单的默认提交行为，然后使用fetch等API将表单数据异步提交到服务器。这种方式提交的表单数据格式为application/x-www-form-urlencoded，数据量较小。

通过AJAX提交表单

AJAX是一种使用js实现的异步通信方式，可以在后台执行操作的同时，不刷新当前页面。在提交表单时，我们可以使用jQuery等前端框架来实现AJAX方式的表单提交，代码示例如下：

$('form').on('submit', function(e) {
  e.preventDefault(); // 阻止表单的默认提交行为
  const formData = $(this).serialize();
  $.ajax({
    url: '/submit',
    type: 'post',
    dataType: 'json',
    data: formData,
    success: function(data) {
      // do something
    },
    error: function(xhr) {
      // do something
    }
  });
});

通过serialize方法将表单序列化为URL编码格式的字符串，然后使用$.ajax方法异步提交到服务器。该方法提交的表单数据格式也为application/x-www-form-urlencoded。

使用第三方库实现表单提交

除了上述方式之外，我们还可以使用第三方库来实现表单提交，比如Formik、Redux-Form等。这些库可以帮助我们简化表单验证、状态管理等操作。例如，使用Formik库可以通过如下代码实现表单提交：

import { Formik } from 'formik';

<Formik
  initialValues={{ name: "", email: "" }}
  validate={values => {
    // validation code
  }}
  onSubmit={(values, { setSubmitting }) => {
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 400);
  }}
>
  {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" onChange={handleChange} onBlur={handleBlur} value={values.name} />
      <input type="email" name="email" onChange={handleChange} onBlur={handleBlur} value={values.email} />
      <button type="submit" disabled={isSubmitting}>Submit</button>
    </form>
  )}
</Formik>

通过上述代码，我们可以实现表单的提交，同时在Formik库的帮助下，我们也可以方便的进行表单验证等操作。

总结

在本文中，我们介绍了几种js实现表单提交的方法，包括在表单元素上绑定submit事件、异步提交表单、AJAX方式提交表单以及使用第三方库实现表单提交。在选择具体的提交方式时，需要根据具体的场景进行选择，以达到最佳的提交效果。