位置: 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)

  • 所得税汇算清缴表在哪里打印
  • 土地增值税扣除20%的适用情况
  • 无法支付的应付账款需要交增值税吗
  • 本年利润呈亏损要不要上企业所得税?
  • 经营范围变更银行不变更有影响吗
  • 更正申报多交的个税
  • 股权变更怎样交契税
  • 委托加工白酒消费税计税依据
  • 成本跨年如何处理
  • 企业的房产税节税有哪些方案?
  • 企业自行去税务开具房租发票税款怎么做?
  • 税务未抄报
  • 退货没有红字发票怎么办
  • 中标服务费直接按开票金额付款吗
  • 如何计算房地产容积率与土地面积
  • 计提工资与发放工资
  • 亏损企业所得税汇算清缴怎么做
  • 代收代付水电费会计分录
  • 记账凭证保存年限2019
  • 以前年度损益调整
  • linux内核有什么作用
  • 厂区绿化工程计入什么科目
  • 电脑老是弹出广告怎么处理
  • linux的ps命令用法
  • PHP:pg_transaction_status()的用法_PostgreSQL函数
  • 同一控制下的企业合并,合并方在企业合并中取得的资产
  • 购进免税农产品进行进项税额抵扣时,其抵扣率为
  • 电脑上fci是什么文件
  • 企业财产租赁税率
  • 黑尾鮰鱼
  • 奥尔梅克
  • 发票多久过期不能开
  • php登录注册
  • 一文看懂华为新品发布会
  • php无限分类实现不实用递归
  • 税控盘开具增值税专用发票步骤
  • 以前年度损益调整结转到本年利润吗
  • 结转结余的概念
  • 织梦怎么改文字
  • mysql5.7压缩包安装配置教程
  • mongodb怎么复制粘贴
  • 将原生html改成vue
  • 建筑企业提供服务的机制保障
  • 抵扣是什么意思大白话...举例
  • 固定资产清理税务处理
  • 金税四期主要监控的内容
  • 个人转让房产税率
  • 财政收回用款额度
  • 一般纳税人购进商品的会计分录
  • 研发费用扣除75%
  • 银行开户存款流程
  • 企业资质证书丢失怎么办
  • 现金日记账怎么划线
  • 建账的基本流程图
  • mysql基本sql语句大全(基础用语篇)
  • 在windows中下列叙述正确的是什么
  • mac备忘录怎么使用
  • freenas11.2安装教程
  • linux socket 常用函数小结
  • linux里chmod
  • 三种方法完美解决问题
  • win7开机总是自检
  • CCMoveBy与CCMoveTo
  • html上拉加载更多
  • 环境变量windows
  • portainer集群管理
  • 分享一些常用的文件
  • 超全面的竣工验收流程及资料
  • jquery添加id属性
  • net user %username%
  • jquery从左到右渐渐显示
  • python 批量操作
  • 面向对象三大基本特性
  • python3 with语句
  • python的面向对象和模块原理
  • 国家税务总局增值税发票查验平台网址
  • 代理记账公司自查自纠情况报告范文
  • 北京比较大五金市场在哪
  • 岗位回避什么意思
  • 税务稽查增值税账务调整案例
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设