位置: IT常识 - 正文

浅谈 JSON 对象和 FormData 相互转换,打通前端与后端的通信血脉(json与对象的区别)

编辑:rootadmin
浅谈 JSON 对象和 FormData 相互转换,打通前端与后端的通信血脉 前言

推荐整理分享浅谈 JSON 对象和 FormData 相互转换,打通前端与后端的通信血脉(json与对象的区别),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:json对象与json字符串的区别,json与对象的区别,json对象是什么类型,json对象和javascript对象,json与对象,json对象和java对象的区别,json对象和java对象的区别,json对象和javascript对象,内容如对您有帮助,希望把文章链接给更多的朋友!

大家都知道,前端在和后台进行交互联调时,肯定避免不了要传递参数,一般情况下,params 在 get 请求中使用,而 post 请求下,我们有两种常见的传参方式: JSON 对象格式和 formData 格式,但是一些场景是需要我们对这两种数据格式进行转换的,例如表单提交,有些是 JSON 对象格式的数据,有些是 FormData 格式的数据,这个时候就需要我们对其进行转换。

常见的 POST 提交数据方式1. application/x-www-form-urlencoded

表单格式提交数据,通过 form 标签的 action 属性,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据。

2. multipart/form-data

这也是一个常见的 post 数据提交的方式,我们使用表单上传文件时,就要让 form 的 enctype 等于这个值,多用于文件上传。

3. application/json

application/json 这个 Content-Type 作为响应头大家肯定不陌生,客观来说,现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 json 字符串。由于 json 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify,服务端语言也都有处理 json 的函数,使用 json 不会遇上什么麻烦,并且 json 格式支持比键值对复杂的多的结构化数据。

4. text/xml

相比于 json,xml 不能更好的适用于数据交换,它包含了太多的包装,而且它跟大多数编程语言的数据模型不匹配,xml 是面向数据的,json 是面向对象和结构的。目前多用于 XML 存储数据,存储配置文件等需要结构化存储的地方使用。

JSON 格式和 formData 格式的区别

JSON 请求头:

浅谈 JSON 对象和 FormData 相互转换,打通前端与后端的通信血脉(json与对象的区别)

JSON 负荷:

formData 请求头:

formData 负荷:

通过上面的几张图我们就能大概明白了,前端传的都是二进制数据,两者的 content-type 是不同的,json 我们已经序列化好了,而 formdata 还是需要进行处理。

formdata 的两种格式

multipart/form-data:既可以上传文件等二进制数据,也可以上传表单键值对,只是最后会转化为一条信息;x-www-form-urlencoded:只能上传键值对,并且键值对都是间隔分开的。json 对象转 formData

逐个转换

let obj = { id: "001", name: "小蓝", age: "18", sex: "女",};const formData = new FormData();formData.append("id", obj.id);formData.append("name", obj.name);formData.append("age", obj.age);formData.append("sex", obj.sex);console.log(formData);

所有属性值转换

let obj = { id: "001", name: "小蓝", age: "18", sex: "女",};const formData = new FormData();Object.keys(obj).map((key) => { formData.append(key, obj[key]);});console.log(formData);formData 对象转 jsonvar jsonObj = {};formData.forEach((value, key) => (jsonObj[key] = value));
本文链接地址:https://www.jiuchutong.com/zhishi/298322.html 转载请保留说明!

上一篇:机器学习篇-指标:AUC

下一篇:图片格式转换(File、Blob、base64)(图片格式转换pdf)

  • 长期股权投资产生的投资收益属不属于非经常性损益
  • 保险政保业务
  • 研发费用成本化和费用化
  • 加计扣除声明在哪里签章有效
  • 支付残保金分录怎么写
  • 申请100万增值税发票资格
  • 财务会计制度备案表
  • 一次性经济补助金怎么领取
  • 递延所得税当期发生额
  • 知识产权投资是什么意思
  • 漏提折旧可以所得税扣除吗
  • 如何计算非居民用电量
  • 土地返还款土地增值税处理
  • 来料加工的生产企业
  • 固定资产借方表示什么意思
  • 原材料意外损失会计分录
  • 工程合同外购设备怎么开票
  • 如何制作macos bigsur的启动盘
  • 什么是毛利润和纯利润
  • 处理废料会计分录大全
  • 其他综合收益和其他收益的区别
  • windows dvd maker是什么
  • 购货方获得现金折扣的会计分录怎么写
  • php动态网站开发项目教程
  • php自定义函数的语法格式
  • 企业所得税如何更正申报
  • web-inf lib
  • 工资属于营业成本
  • php如何定义二维数组
  • http命令
  • python怎么设置字符串宽度
  • 在汇算清缴前未支付的年终奖不可以在所得税前扣除
  • 第二季度所得税可以弥补以前年度亏损吗
  • 为什么分红不影响损益
  • 差额纳税的劳务派遣安保服务征收率
  • 小规模印花税可以按次申报吗
  • 个体升一般纳税人的界限
  • 购买材料发票未到如何做账?
  • 一般纳税人企业所得税怎么征收
  • 残保金提取是什么意思
  • 计提坏账准备资产总额会减少吗
  • 先付款后收到发票
  • 进项税额转出在电子税务局怎么操作
  • 增值税一般纳税人认定标准
  • 固定资产报废会计科目处理
  • 公司认缴没有实缴会有什么风险
  • 企业银行存款的流动性强于存货
  • 化肥贸易行业
  • 产品成本核算要求有哪几项
  • 广告公司个体户税率
  • 冲减坏账准备的金额怎么计算
  • 应交税费会计分录实例分析
  • sql语句中截取字符串
  • ntfs win98
  • win10 更新 蓝屏
  • windows关机蓝屏是怎么回事
  • xp系统设置壁纸
  • centos源码安装软件
  • diy组装电脑前置怎么样
  • macos 音量快捷键
  • 华硕和联想笔记本电脑哪个好点
  • windows8 1
  • win10系统自带虚拟机无法启
  • javascript语句大全
  • 前端node跨域处理
  • 三眼仔啥意思
  • linux shell脚本编程100例
  • python如何用turtle
  • bat调用vbs脚本
  • unity控制相机旋转
  • unity 内嵌浏览器
  • jquery attr和prop
  • javascript面向对象精要
  • 青岛胶州国际机场在哪个区
  • 不动产租赁如何征税
  • 地税局多措并举工作总结
  • 如何在国税网查看社保人员信息
  • 营业税属于地方税
  • 汉中税务大厅电话是多少
  • 房租是不是先交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设