Form表单的四种编码形式

2024-02-03 05:30:50

在了解后端接口对请求的处理前，我们就需要先了解前端需要做什么，了解我们发送给后端的请求数据是什么样的，后端才能对这些数据进行处理。而Form表单就是前端将数据发送给后端的一种方式，在这之前需要对Form表单数据进行编码。

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

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

application/x-www-form-urlencoded ：这是最常见的编码形式，它将表单字段名和值编码为键值对，并用"&"连接。例如，一个名为"username"的字段值为"john"，将被编码为"username=john"。
multipart/form-data ：这种编码形式用于上传文件。它将表单字段名、值和文件一起编码为一个多部分消息。
text/plain ：这种编码形式将表单字段名和值编码为纯文本。
application/json ：这种编码形式将表单字段名和值编码为JSON字符串。

在axios中配置更改编码形式

在axios中，可以通过设置Content-Type请求头来更改编码形式。以下是在axios中设置不同编码形式的示例：

// application/x-www-form-urlencoded
axios.post('/api/submit-form', {
  username: 'john',
  password: 'secret'
}, {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
});

// multipart/form-data
axios.post('/api/upload-file', {
  file: file
}, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

// text/plain
axios.post('/api/submit-text', {
  text: 'Hello world!'
}, {
  headers: {
    'Content-Type': 'text/plain'
  }
});

// application/json
axios.post('/api/submit-json', {
  username: 'john',
  password: 'secret'
}, {
  headers: {
    'Content-Type': 'application/json'
  }
});