基础介绍开始
一般 post 不允许发送复杂数据类型, 比如 object 和 array, 而 jquery 的 ajax 封装了这个方法, 使得可以发送复杂数据格式,
代码
- $.ajax({
- type: 'POST',
- url: 'http://www.skybseo.cn/php/jiekou.php',
- data: {
- firstName: "Fred",
- lastName: "Flintstone",
- boj:{
- n:1,
- name:'张三',
- sex:0
- },
- list:['张三','李四','王五','赵六'],
- listobj:[
- {id:1,name:'张三'},
- {id:2,name:'李四'}
- ]
- },
- success: (res)=>{
- console.log(res)
- },
- // dataType: dataType
- });
消息体中的格式为
然而 vue 指定的 ajax 插件 axios 没有封装这样的功能, 并且默认的 post 请求大不一样.
这是和请求消息头中的 content-type 字段的值有关,
content-type 字段用于描述数据实体的类型, 就是指定客户端要发送的数据类型
post 请求中常见的 content-type 的值有四种
1.application/x-www-form-urlencoded
最常见的 post 的数据类型, 也是表单提交的数据类型, jquery 的 ajax 默认也是这个
2.multipart/form-data
文件上传时要使用的数据类型
3.application/json
json 格式的数据类型, 也是 axios 的默认类型
4.text/xml
现在这个很少用了, 基本没见过
axios 默认的数据类型为 application/json, 一般后台不能接受到 post 的请求的信息体, 就是因为不能正确识别 json 请求, 只要修改一下 content-type 就可以了, 详见 https://blog.csdn.net/weixin_41797287/article/details/80648119
基础介绍结束
那么如何让 axios 可以发送复杂数据格式呢?
提供两个方法
方法一, 仿照 jquery 改数据格式
axios 插件提供了 transformRequest 方法, 这个方法可以修改 data 中的值,
代码是我公司前端大佬写的, 也是现在在做的项目一直用的, 先看效果
贴代码
- let data = {
- id:1,
- name:'李四',
- arr:['张三','王五','赵六','刘七'],
- list:[
- {id:1,name:'周八',sex:1},
- {id:2,name:'卢九',sex:0},
- {id:3,name:'齐十',sex:1},
- ],
- obj:{
- title:'axios 请求学习',
- time:'2018-9-11'
- }
- }
- // 这是定义的数据, 基本数据类型和复杂数据类型都有
- axios({
- method: "POST",
- url: 'http://www.skybseo.cn/php/jiekou.php', // 测试 URL, 不可使用
- data:data,
- headers: {
- 'Content-Type': 'application/x-www-form-urlencoded', // 指定消息格式
- },
- transformRequest: [function (e) {
- // 数据转换的核心代码, 来自我公司的前端大佬
- function setDate(e){
- var t, n, i, r, o, s, a, c = "";
- for (t in e)
- if (n = e[t], n instanceof Array)
- for (a = 0; a <n.length; ++a)
- o = n[a], i = t + "[" + a + "]", s = {}, s[i] = o, c += setDate(s) + "&";
- else if (n instanceof Object)
- for (r in n) o = n[r], i = t + "[" + r + "]", s = {}, s[i] = o, c += setDate(s) + "&";
- else void 0 !== n && null !== n && (c += encodeURIComponent(t) + "=" + encodeURIComponent(n) + "&");
- return c.length c.substr(0, c.length - 1) : c
- }
- // 数据转换的核心代码结束
- return setDate(e)
- }],
- })
- .then((res) => {
- console.log(res)
- })
- .catch((err) => {
- console.log(err)
- })
方法二, 改后端
思考一下: 为什么 axios 要这么反人类的指定默认的传输数据格式为 json, 而不是常规的表单上传类型
因为 json 是目前数据传输最优秀的类型, 易于理解, 数据传输更快
目前后端向前端传递数据, 几乎全部的公司实现了 json 传输
axios 认为前端向后端传递数据也要使用 json, 但是目前服务器端一般都不会接收这样的数据, 除了 Node, 因为 node 可以很轻松的指定接收数据的格式, 在这方面 node 服务器比其他服务器更灵活.
那么如何更改后端代码才能接收 json 呢?
首先, 我们先实现前端代码传递 json, 其实就是使用 axios 默认的传输就可以了
前端代码
- let data = {
- id:1,
- name:'李四',
- arr:['张三','王五','赵六','刘七'],
- list:[
- {id:1,name:'周八',sex:1},
- {id:2,name:'卢九',sex:0},
- {id:3,name:'齐十',sex:1},
- ],
- obj:{
- title:'axios 请求学习',
- time:'2018-9-11'
- }
- }
- // console.log(data)
- axios({
- method: "POST",
- url: 'jiekou.php',
- data:data,
- headers: {
- 'Content-Type': 'application/json;charset=UTF-8', // 指定消息格式
- },
- })
- .then((res) => {
- console.log(res)
- })
- .catch((err) => {
- console.log(err)
- })
请求消息体中的数据
后端 php 接收代码 (post 接收不到)
返回数据为
总结
目前几乎全部的接口返回的数据都是 json, 但前端上传通常使用 multipart/form-data, 如果要使用 json 发送复杂数据, 一定要确保后端支持, 如果不支持只能使用第一种方法封装 axios, 也许未来前端传递数据也会逐渐的被 json 替代.
来源: https://www.2cto.com/kf/201809/777890.html