JS请求 不同content-type值 对应的参数格式

本文介绍了JavaScript请求中不同Content-Type值所对应的参数格式,包括'application/json'用于发送JSON字符串,'application/x-www-form-urlencoded'为标准键值对格式,'multipart/form-data'适用于文件上传,以及'text/plain'用于纯文本编码。了解这些有助于优化前后端交互。

常用的content-type类型

  1. application/json:消息主体是序列化后的 JSON 字符串

  2. application/x-www-form-urlencoded:数据被编码为键值对。这是标准的编码格式

  3. multipart/form-data: 需要在表单中进行文件上传时,就需要使用该格式。常见的媒体格式是上传文件之时使用的

  4. text/plain:数据以纯文本形式(text/json/xml/html)进行编码,其中不含任何控件或格式字符。

对应的参数格式

  1. application/json:序列化后的 JSON 字符串
  2. application/x-www-form-urlencoded:以键值对形式 key1=value1&key2=value2 的方式发送到服务器,所有浏览器都可以兼容
> 以上两种都可以使用qs插件包的qs.stringfy()  进行转化
>  options.body = qs.stringify(options.body);
  1. multipart/form-data: 需要传递formData格式
	const formData= new FormData();
	formData.append('name',"cici");
	formData.append('addr',"上海");
	return formData
  1. text/plain:数据以纯文本形式(text/json/xml/html)进行编码,其中不含任何控件或格式字符。
### 设置 Axios 中不同类型的 Content-Type 请求头 在 Axios 的 HTTP 请求中,`Content-Type` 是用于指定发送到服务器的数据格式的关键字段。以下是针对不同类型 `Content-Type` 的设置方法及其对应参数处理方式。 #### 1. **application/json** 当请求头中的 `Content-Type` 被设置为 `application/json` 时,表示客户端向服务端传递 JSON 数据。在这种情况下,Axios 默认会自动将 JavaScript 对象序列化为 JSON 字符串并发送给服务器[^3]。 ```javascript axios.post('/api/data', { name: 'John Doe', age: 28, }, { headers: { 'Content-Type': 'application/json' } }); ``` 上述代码片段展示了如何通过 Axios 发送 POST 请求,并显式设置了 `Content-Type` 为 `application/json`。需要注意的是,默认情况下即使不手动设定该头部信息,Axios 也会将其视为 JSON 并执行相应操作[^2]。 #### 2. **application/x-www-form-urlencoded** 对于表单提交场景下的 URL 编码数据 (`application/x-www-form-urlencoded`) ,通常需要借助第三方库如 qs 来完成对象转字符串的过程后再作为 body 参数的一部分传出[^4]。 下面是一个例子: ```javascript const qs = require('qs'); axios({ method: 'post', url: '/login', data: qs.stringify({ username: 'admin', password: 'password123!' }), headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) .then(response => console.log(response)) .catch(error => console.error(error)); ``` 这里引入了 `qs` 库来帮助我们将 JS 对象转化为适合此 MIME 类型使用的 key-value 形式的查询字符串。 #### 3. **multipart/form-data** 最后一种常用类型是多部分文件上传所需的 `multipart/form-data` 。这种模式下一般涉及二进制大对象 (BLOB),比如图片或其他媒体资源文件等。此时我们推荐使用 FormData API 构建 payload。 示例如下所示: ```javascript let formData = new FormData(); formData.append('file', fileInput.files[0]); formData.append('description', 'This is a test description.'); axios({ method: 'post', url: '/upload', data: formData , headers:{ ...formData.getHeaders(), // Some libraries may provide getHeaders function. 'Content-Type':'multipart/form-data' } }).then((response)=>{ console.log(response); }).catch(err=>console.warn(err)); ``` 注意这里的 `FormData` 实例可以直接赋给 `data` 属性,而且它的内部机制能够自动生成合适的边界标记以及构建整个消息体结构。 --- ### 总结说明 以上分别介绍了三种主要的 `Content-Type` 配置方案及其应用场景。每种情况都有其特定的需求和最佳实践,开发者应依据实际业务逻辑选择恰当的方式实现网络通信功能[^1].
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值