uniapp开发小程序使用x-www-form-urlencoded; charset=UTF-8 编码格式请求案例

使用x-www-form-urlencoded,header要放在前面,第一行位置

javascript 复制代码
uni.request({                    
    header: { 'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'},
    url: '',
    method:'POST', //请求方式POST\GET
    data:that.loginData,
    success: function(res) {
        console.log(res)
    }
}) 

200成功

详述 application/json 和 application/x-www-form-urlencoded 区别:

uniapp请求中使用

一、application/x-www-form-urlencoded

application/x-www-form-urlencoded:是最常见的 POST 提交数据的方式,浏览器的原生表单如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据,它是未指定属性时的默认值。 数据发送过程中会对数据进行序列化处理,以键值对形式?key1=value1&key2=value2的方式发送到服务器。 数据被编码成以 '&' 分隔的键-值对, 同时以 '=' 分隔键和值。非字母或数字的字符会被 percent-encoding。**在axios中当请求参数为qs.stringify(data)时,会以此方式提交数据。后台如果使用对象接收的话,可以自动封装成对象**

优势: 所有浏览器都兼容。

问题:在数据结构及其复杂时,服务端数据解析变得很难

二、application/json

随着 json 规范的越来越流行,并且对浏览器支持程度原来越好,许多开发人员在请求头中加入 content-type: application/json ,这样做可以方便的提交复杂的结构化数据,这样特别适合restful接口。它告诉服务器请求的主体内容是 json 格式的字符串,服务器端会对json字符串进行解析,json 格式要支持比键值对复杂得多的结构化数据。这种方式的好处就是前端人员不需要关心数据结构的复杂度,只需要标准的json格式就能提交成功。当在 axios 中请求参数为普通对象时,POST 请求默认发送的是 application/json 格式的数据。 application/json 需要封装成对象的话,可以加上 @RequestBody 进行注解。

优势:是前端不需要关心数据结构的复杂度,后端解析方便。

问题:少数浏览器不兼容。

举例:向服务器发送数据: {a:"a", b:"b"}

如果头的格式是 application/x-www-form-urlencoded, 则 ajax.send("a='a'&b='b'");

如果头的格式是application/json, 则 ajax.send(JSON.stringify(data));

补充:Content-Type 值除了上述两种还有,multipart/form-data和text/plain方式

multipart/form-data: 主要用于文件上传,将文件转成二进制数据进行传输,不涉及转码。

text/plain: 是使用纯文本进行传输,平时用的很少。

相关推荐
阿蔹6 分钟前
UI测试自动化-Web-Python-Selenium-2-元素操作、浏览器操作
前端·python·selenium·ui·自动化
lsx20240610 分钟前
Python 3 函数
开发语言
-To be number.wan11 分钟前
C++ 进阶技巧:如何让 cout << 自定义对象 正常输出?
开发语言·c++
2501_9444460014 分钟前
Flutter&OpenHarmony状态管理方案详解
开发语言·javascript·flutter
一路往蓝-Anbo16 分钟前
C语言从句柄到对象 (三) —— 抛弃 Malloc:静态对象池与索引句柄的终极形态
c语言·开发语言·数据结构·stm32·单片机·算法
T_Donna19 分钟前
【问题解决】react native: cli.init is not a function
javascript·react native·react.js
谎言西西里26 分钟前
React hooks 之 一篇文章掌握 useState 和 useEffect 的核心机制
前端·react.js
qx0926 分钟前
html中使用vue3+elementplus
javascript·vue.js·html
lbb 小魔仙30 分钟前
【Java】Spring Data JPA 详解:ORM 映射、查询方法与复杂 SQL 处理
java·开发语言·sql·spring cloud
Apifox.31 分钟前
Apifox 12 月更新| AI 生成用例同步生成测试数据、接口文档完整性检测、设计 SSE 流式接口、从 Git 仓库导入数据
前端·人工智能·git·ai·postman·团队开发