前端向后台发送的请求数据有:JSON字符串和form表单两种格式。一般情况下可以两种格式都OK,但在某些情况下就需要根据情况来进行选择。
1.首先来看一下两种数据格式在请求中的体现形式:
JSON字符串:
Form Data:
看起来区别不是很大,都可以通过键值来获取相应的值。
再来看一组更复杂的数据:
JSON字符串:
Form Data:
这个时候的区别就体现出来了,Form表单会将数组按照索引进行拆分,所以这个时候后台不能直接通过dataArr来获取这个数组数据,只能根据索引来一一获取。当数组length不确定时,处理起来就比较麻烦了,所以这种情况传参使用JSON字符串的形式比较合适。具体要如何选择这两种数据格式,后面再介绍
2.两种传参的实现:
2.1 JSON字符串:
request是axios创建的实例,axios的封装见 axios的封装 附上代码:
request({ url:"/api/post", method:"post", data:JSON.stringify({ mess:'hello', dataArr:[{name:'test',vlaue:[1,2,3]},{name:"match",vlaue:[1,2]}] }), headers:{ 'content-type':"application/json" } }).then(res=>{ console.log('响应成功',res) },reject=>{ console.log('响应失败',reject) })
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
2.2 Form Data:
FormData的实现方法有很多种:
1.form表单,现在基本不用了,这里不再介绍。
2.引入qs,通过QS.stringify
3. new FormData(),通过append方法添加参数
这里还用到了文件上传,file.file就是同upload组件传入的文件
3.如何选择:
1.当参数的数据结构比较复杂时,如不仅仅是简单的键值对,而是对象或数组嵌套结构时,建议使用JSON字符串传参
2.涉及文件上传时建议使用FormData
3.其他一般情况两者皆可
4.涉及文件上传同时又需要携带比较复杂的数据:Form Data+JSON.stringify
或:
原文:axios 传递json axios发送json数据_deanyuancn的技术博客_51CTO博客