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

  • 企业购进固定资产
  • 税务师继续教育怎么做
  • 办税人员可以不交社保吗
  • 开具红字专用发票的条件
  • 房屋租赁房产税税率是怎样计算的
  • 农业免税企业账户怎么查
  • 股东无偿借款给公司需要交税吗
  • 劳务派遣个人所得税
  • 购买成品入库并结转成本会计分录怎么写?
  • 企业预收款项业务不多的情况下可以不设置预收账款科目
  • 货物运输代理服务税率
  • 营改增的优惠政策
  • 帮其他企业推广产品
  • 供热企业免税收入标准
  • 简并税率政策是什么?简并税率政策要点如何解读?
  • 如何批量查询发票
  • 折让冲减的产品销售收入
  • 红字发票如果开多了下个月能进行抵扣么?
  • 社会保险费缴费凭据在哪查
  • 享受小型微利企业税收优惠的条件
  • 高价转让股份
  • 培训机构的收入有哪几方面
  • 事业单位坏账怎么处理
  • 交易性金融资产公允价值变动计入
  • 苹果Mac系统怎么用光盘安装
  • 五险一金的记账凭证怎么填写
  • 机票的保险费能开发票吗
  • 成本和费用有什么区别与联系
  • 资产负债表结构是什么
  • 刷路由器固件的作用和意义
  • 开机要按f1才能进系统
  • rtos有什么用
  • 新车车祸报废
  • 应付票据核算的票据包括
  • 无运输工具承运业务的经营者适用免税政策
  • 埃托沙国家公园发展观兽旅游的优势条件
  • 有关商品房质量的投诉,这些年一直
  • 基于Wav2Lip的AI主播
  • 全网最详细的李白解说来了
  • 增值税专用发票的税率是多少啊
  • 自产产品用于福利账务处理
  • 燃气管道安装费和暖气管道安装费两个的欠条怎么写
  • phpcms验证码不显示
  • mssql分布式数据库
  • 暂估入库的账务处理含税吗
  • 金税三期个税申报
  • 如何做好应收应付会计
  • 增值税期末留抵税额是什么意思
  • 收取加盟费的条件
  • 计提本月短期借款利息500元会计分录
  • 前程无忧是怎么收费的
  • 生产成本直接人工怎么算
  • 公司注册资金可以变更减少吗
  • 总资产周转率多少算正常
  • 自动化生产线模型
  • linux怎么禁用防火墙
  • bios如何关闭网卡
  • xp无法识别的usb设备 怎么解决
  • windows server vista
  • linux 命令提示
  • linux which ls
  • 局域网 打印机 共享
  • 一台电脑多个用户组怎么显示在一个屏幕上
  • win7怎么多分出一个盘
  • mac上安装
  • mac我的所有文件 删除
  • win7系统c盘占用空间大
  • linux系统的安装配置
  • win8点设置没反应
  • linux git管理工具
  • 跑跑跑游戏
  • es6 commonjs
  • python的入门教程
  • jQuery实现checkbox列表的全选、反选功能
  • 基于android的app的设计与开发
  • linux bash命令详解
  • javascript如何写操作命令
  • 安卓获取图片路径
  • 企业所得税年报资产总额平均值怎么填写
  • 匈牙利离中国广东有多远
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设