探索4种不同的Form表单交互方式：前端与后端的连接艺术

Form表单的四种编码方式

Form表单对数据的编码有四种形式：

• application/x-www-form-urlencoded
• application/json
• multipart/form-data
• text/plain

通过Content-Type: XXXXXX（这个地方就是上面的四种形式之一）体现

1 application/x-www-form-urlencoded

application/x-www-form-urlencoded表单提交的默认格式，不支持文件类型

其特点是将表单控件的数据以key1=value1&key2=value2的形式进行编码，被编码的键值对之间以&符号进行分隔。

application/x-www-form-urlencoded编码形式的标头

application/x-www-form-urlencoded编码形式的载荷数据

2 multipart/form-data

multipart/form-data是另一种常见的编码形式，用于上传文件。当一个表单控件包含文件时，该表单就需要采用这种编码方式。在该编码方式下，每个表单控件的数据被分割为一个独立的部分，每个部分都有一个唯一的边界来分隔它们。每个部分都包含一个Content-Disposition头，描述了该部分的内容类型和任何相关信息。但注意不能手动设置'Content-Type', 'multipart/form-data'这样就会丢失掉boundary=浏览器默认的boundary

3 application/json

application/json格式在AJAX或者Fetch的POST请求里面是最常见的一种格式,以JSON编码形式发送请求

application/json编码形式的标头 application/json编码形式的载荷数据

4 text/plain

text/plain是以纯文本格式（就是一段字符串）发送的. 如果你发送一个对象例如{ name:"fyyyyy", age:18 }一定要对它做JSON.stringfy()处理，否则将传送[object Object]

Axios转换编码形式发送数据

默认情况下，axios将 JavaScript 对象序列化为 JSON 

对象序列化为 JSON的例子：

application/x-www-form-urlencoded形式发送

如果JavaScript 对象要以application/x-www-form-urlencoded格式发送数据

在浏览器中，可以使用URLSearchParams API或者使用qs库等，如：

方法一：使用URLSearchParams

const params = new URLSearchParams();  //实例化对象
params.append('name', 'Tom'); 
params.append('age', '25'); 
axios.post('/foo', params);

方法二：使用qs库

(要安装qs，可以使用npm在命令行中运行以下命令：npm install qs)

如果要改变form表单的编码为application/x-www-form-urlencoded，可以在发送请求时设置请求头的Content-Type为application/x-www-form-urlencoded，并使用qs库的stringify方法将请求数据转换为URL参数格式。

例如，下面的代码演示了如何将JSON格式的数据转换为URL参数格式，并使用application/x-www-form-urlencoded编码形式进行请求

const qs = require('qs');
const axios = require('axios');
const data = {
  name: 'John',
  age: 30
};
const config = {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
    //在axios中，可以使用`transformRequest`来改变form表单的编码形式。
  transformRequest: [(data) => qs.stringify(data)]
};
axios.post('/api', data, config)
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

注：transformRequest函数是axios配置项中的一个属性，它可以在发送请求之前对请求数据进行处理。该函数在axios发送请求之前被调用，允许我们修改该请求的请求数据。 在axios中，transformRequest是一个可配置项，它接受一个数组，数组中的每个函数都会依次执行，对请求数据进行逐步的转换和修改。 下面是如何使用这个函数的

const axios = require('axios');
const qs = require('qs');
const data = {
  name: 'John',
  age: 30
};
const config = {
  transformRequest: [
    function (requestData) {
      // 对请求数据进行转换
      const requestParams = qs.stringify(requestData);
      return requestParams;
    }
  ]
};
axios.post('/api', data, config)
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

或者写成

import qs from 'qs'; 
const data = { 'bar': 123 }; 
const options = { 
    method: 'POST', 
    headers: { 'content-type': 'application/x-www-form-urlencoded' }, 
    data: qs.stringify(data), 
    url, 
    }; 
axios(options);

multipart/form-data形式发送

如果要改变form表单的编码为multipart/form-data，可以使用FormData来创建一个包含表单数据的实例。然后将该实例作为请求体data传递给axios即可。

例如，下面的代码演示了如何将JSON格式的数据转换为FormData实例，并使用multipart/form-data编码形式进行请求：

const FormData = require('form-data');
const axios = require('axios');

const data = {
  name: 'John',
  age: 30
};

const formData = new FormData();
formData.append('name', data.name);
formData.append('age', data.age);

const config = {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
};

axios.post('/api', formData, config)
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

application/json形式发送

在Axios中，可以通过设置请求头中的Content-Type属性为application/json，以JSON编码形式发送请求。此方法适用于向后端API以JSON格式发送数据请求。发送JSON字面量直接传递JavaScript对象给Axios就可以，Axios会自动序列化对象到JSON字符串。

import axios from 'axios';

const data = {
  name: 'John',
  age: 30,
  gender: 'Male'
};

axios.post('/api/user', data, {
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then((res) => {
    console.log(res.data);
  })
  .catch((error) => {
    console.log(error);
  });

multipart/form-data和application/json的区别

multipart/form-data和application/json都是常见的HTTP请求数据编码形式，但它们具有不同的特点和适用场合。

multipart/form-data是一种常见的用于上传文件的编码方式，它可以将请求数据划分为多个部分，并按照指定的格式对每个部分进行编码。这种编码方式通常用来提交带有大量数据或二进制数据的表单，例如上传图片、视频、音频等文件，以及带有文件上传的表单。

与application/json不同，multipart/form-data编码的请求体是二进制的，并且可以通过boundary分界符将不同的提交内容进行分离。通常，为了确保正确的编码和分隔，该编码方式需要使用一些特殊的技术和工具库进行操作。

application/json是一种常见的用于提交结构化数据的编码方式，特别是在Web API和RESTful服务开发中广泛使用。它是一种基于文本的编码方式，使用JSON格式对请求数据进行封装和传输，这种编码方式通常用于提交包含结构化数据的表单，例如提交JSON对象的POST请求。

与multipart/form-data不同，application/json编码的请求体是文本的，并且可以轻松地使用JavaScript中的JSON对象进行编码和解码，而无需使用特殊的技术和工具库。

总的来说，如果要提交文件或二进制数据，multipart/form-data更好。如果要提交结构化的数据，application/json可能更好。