axios POST 提交数据的三种 Content-Type 写法详解

第一种方式是设置 Content-Type 为 application/json。在使用 axios 发送 POST 请求时，若直接传递 JavaScript 对象作为数据参数，axios 默认会将其序列化为 JSON 字符串，并自动设置请求头为 application/json。例如，定义一个包含 code 和 name 字段的数据对象，直接传入 axios.post 方法即可。后端接收时通常需要使用 @RequestBody 等注解来解析 JSON 数据。

import axios from 'axios'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
    console.log('res=>',res);            
})

第二种方式是使用 Content-Type 为 multipart/form-data。这种方式通常用于文件上传或需要模拟 HTML 表单提交场景。在代码中，需要实例化 FormData 对象，通过 append 方法逐个添加键值对，然后将该 FormData 实例作为数据参数传递给 axios.post。此时请求头会自动设置为 multipart/form-data，后端需通过 HttpServletRequest 或对应的表单解析方式获取数据。

import axios from 'axios'
let data = new FormData();
data.append('code','1234');
data.append('name','yyyy');
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
    console.log('res=>',res);            
})

第三种方式是设置 Content-Type 为 application/x-www-form-urlencoded。这是传统 HTML 表单提交的默认编码类型。在使用 axios 时，若直接传递对象，axios 默认可能不会自动序列化为 URL 编码格式，因此通常需要引入 qs 库。通过 qs.stringify 方法将对象序列化为 URL 编码的字符串，再作为数据参数传入 axios.post。这种方式适用于后端期望接收标准表单提交数据的场景。

import axios from 'axios'
import qs from 'Qs'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,qs.stringify({
    data
}))
.then(res=>{
    console.log('res=>',res);            
})

总结来说，从 jQuery 迁移到 axios 时，最需要注意的就是 Content-Type 的设置差异。jQuery 默认可能自动处理序列化，而 axios 更强调对请求头和数据的显式控制。理解这三种方式对应的后端接收机制（如 Java 中的 @RequestBody、HttpServletRequest 等）至关重要，这有助于避免前后端数据交互时的解析错误。

从 jQuery 转到 axios 时，最让人困扰的往往是 Content-Type 的设置问题。经过实践摸索，目前我已经理清了它们各自的原理和适用场景。正确设置 Content-Type 是确保前后端数据顺利交互的关键步骤。

上述三种提交方式会直接对应后端不同的请求处理逻辑。开发者需要注意后端接口的具体实现，例如 Java 后端可能使用 @RequestBody 来接收 JSON 数据，或使用 HttpServletRequest 来处理表单数据。前端提交方式必须与后端接收方式严格匹配，否则会导致数据解析失败。

以上就是 axios POST 提交数据的三种请求方式写法示例的详细内容，更多关于 axios POST 提交数据请求方式的资料请关注本站其它相关文章！