发布表单数据

发布表单数据是指在前端向后端发送表单数据，通常发生在用户提交表单的时候。在实际开发中，开发者需要掌握如何获取表单数据以及如何传送表单数据。

获取表单数据

在前端，获取表单数据可以使用 FormData 对象，也可以使用 jQuery 等框架中封装的表单序列化方法。

使用 FormData 对象获取表单数据

const formElement = document.querySelector('form');
const formData = new FormData(formElement);

上述代码通过 FormData 对象获取表单数据，将 form 元素传入构造函数即可。获取到的数据会以键值对的形式存储在 formData 对象中，可以通过 formData.get() 来获取指定字段的值，也可以通过 formData.entries() 遍历所有字段值。

使用 jQuery 获取表单数据

const formData = $('form').serialize();

上述代码使用 jQuery 的 serialize() 方法获取表单数据，将选择器 form 传入即可。获取到的数据会以 URL 参数的形式序列化，可以直接用于 AJAX 请求。

传送表单数据

在前端获取到表单数据后，需要将数据传送到后端。通常使用 AJAX 请求来传送数据，当然也可以使用表单的 submit() 方法来进行传送。

使用 AJAX 请求传送表单数据

$.ajax({
  url: '/submit-form',
  method: 'POST',
  data: formData,
  processData: false,
  contentType: false,
  success: function(response) {
    console.log(response);
  }
});

上述代码使用了 jQuery 的 AJAX 方法来请求 /submit-form API，将表单数据以 formData 形式传入。需要注意的是，processData 和 contentType 属性都需设置为 false，以避免 jQuery 自动将数据处理成 URL 参数，而是直接以文件上传形式传递数据。

使用表单的 submit() 方法传送表单数据

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

上述代码通过表单的 submit() 方法来提交表单数据，调用即可。需要注意的是在表单元素中指定 action 和 method 属性，以便浏览器自动转发数据到指定的 API。同时，为了防止页面重载，可以通过 event.preventDefault() 来阻止默认行为。