在 fetch 中提交表单数据 - Javascript

在Web应用程序设计中，表单是一种相当常见的组件。表单可用于向服务器提交数据，从用户那里收集信息或进行用户身份验证。在Javascript中，使用fetch API可以非常方便地提交表单数据。

使用FormData API

为了提交表单数据，我们可以使用FormData API，这个API可以创建表单数据并且自动设置Content-Type请求头。FormData接受一个表单DOM元素作为构造函数参数，然后可以通过append()方法向表单中添加表单字段。

以下是一个例子：

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

fetch('/submit', {
  method: 'POST',
  body: formData
}).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

这个例子假设这个表单是一个元素集，将表单数据作为FormData实例的第一个参数传入。fetch函数的第二个参数是一个选项对象，包含HTTP请求的方法和请求体。在这个例子中，我们使用POST方法提交FormData实例对象。

发送JSON数据

在某些情况下，您可能希望提交JSON格式的数据而不是表单数据。在这种情况下，我们需要使用JSON.stringify()方法将数据编码为JSON字符串，然后将其作为请求主体的一部分发送。

以下是一个例子：

const data = { name: 'John', age: 30 };
  
fetch('/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
}).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

向fetch函数传递一个选项对象，方法是POST，Content-Type标头为application/json，并将数据对象转换为JSON字符串。fetch函数也可以用于GET请求，例如：

const data = { name: 'Samuel', age: 25 };

fetch(`/search?query=${JSON.stringify(data)}`)
  .then(response => {
    console.log(response);
  }).catch(error => {
    console.error(error);
});

fetch函数通过URL参数将数据对象发送到服务器。在这个例子中，我们使用JSON.stringify()方法将数据对象编码为JSON字符串，将其添加到查询字符串中，并通过URL发送给服务器。

结论

使用fetch API非常方便地提交表单数据和JSON数据。在提交表单数据时，可以使用FormData API创建表单数据对象。在发送JSON数据时，需要将数据对象转换为JSON字符串并将其作为请求主体的一部分发送。