当前位置: 首页 > news >正文

json对象和formData相互转换

前言

大家都知道,前端在和后台进行交互联调时,肯定避免不了要传递参数,一般情况下,paramsget 请求中使用,而 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 数据提交的方式,我们使用表单上传文件时,就要让 formenctype 等于这个值,多用于文件上传。

3. application/json

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

4. text/xml

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


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 对象转 json

var jsonObj = {};
formData.forEach((value, key) => (jsonObj[key] = value));

相关文章:

json对象和formData相互转换

前言 大家都知道,前端在和后台进行交互联调时,肯定避免不了要传递参数,一般情况下,params 在 get 请求中使用,而 post 请求下,我们有两种常见的传参方式: JSON 对象格式和 formData 格式&#x…...

【c++面试问答】常量指针和指针常量的区别

问题 常量指针和指针常量有什么区别? const的优点 在C中,关键字const用来只读一个变量或对象,它有以下几个优点: 便于类型检查,如函数的函数 func(const int a) 中a的值不允许变,这样便于保护实参。功能…...

Ubuntu18下编译android的ffmpeg经验

虽然按照网上的一些资料(如:最简单的基于FFmpeg的移动端例子:Android HelloWorld_雷霄骅的博客-CSDN博客_android ffmpeg 例子,,编译FFmpeg4.1.3并移植到Android app中使用(最详细的FFmpeg-Android编译教程…...

Spring Security in Action 第十三章 实现OAuth2的认证端

本专栏将从基础开始,循序渐进,以实战为线索,逐步深入SpringSecurity相关知识相关知识,打造完整的SpringSecurity学习步骤,提升工程化编码能力和思维能力,写出高质量代码。希望大家都能够从中有所收获&#…...

本文章提供中国国界、国界十段线原始数据以及加载方法

本文章提供中国国界九段线原始数据和加载方法 1、中国国界 完整数据 包括十段线 中国国界线(完整版 包括十段线) 2、原始数据 中国国界十段线topojson格式数据.rar 中国国界线topjson数据 中国国界十段线svg格式数据.rar 中国国界线svg数据 中国国界十段线shp格式数据…...

一文带你搞懂,Python语言运算符

Python语言支持很多种运算符,我们先用一个表格为大家列出这些运算符,然后选择一些马上就会用到的运算符为大家进行讲解。 说明:上面这个表格实际上是按照运算符的优先级从上到下列出了各种运算符。所谓优先级就是在一个运算的表达式中&#x…...

JAVA集合专题4 —— Map

目录Map接口实现类的特点Map接口的常见方法Map六大遍历方式Map练习1code编程练习2code编程练习3思路codeMap接口实现类的特点 Map与Collection并列存在,是Map集合体系的顶级接口Map的有些子实现存储数据是有序的(LinkedHashMap),有些子实现存储数据是无…...

二叉树进阶--二叉搜索树

目录 1.二叉搜索树 1.1 二叉搜索树概念 1.2 二叉搜索树操作 1.3 二叉搜索树的实现 1.4 二叉搜索树的应用 1.5 二叉搜索树的性能分析 2.二叉树进阶经典题: 1.二叉搜索树 1.1 二叉搜索树概念 二叉搜索树又称二叉排序树,它或者是一棵空树,…...

牛客网Python篇数据分析习题(三)

1.现有一个Nowcoder.csv文件,它记录了牛客网的部分用户数据,包含如下字段(字段与字段之间以逗号间隔): Nowcoder_ID:用户ID Level:等级 Achievement_value:成就值 Num_of_exercise&a…...

Java开发常见关键词集绵

一、关键词1: (1)RPC:远程过程调用(Remote Procedure Call)的缩写形式。远程调用的时候让人们觉得是本地调用。 (2)HTTP:超文本传输协议(Hyper Text Transfer…...

解决idea出现的java.lang.OutOfMemoryError: Java heap space的问题

文章目录1. 复现问题2. 分析问题3. 解决问题4. 补充解决java.lang.OutOfMemoryError: PermGen space问题1. 复现问题 今天使用idea开发时,突然报出如下错误: Exception in thread "main" java.lang.OutOfMemoryError: Java heap spaceat org.…...

为什么子进程要继承处理器亲缘性?

请先考虑一个典型的程序为什么需要启动一个子进程。(当然资源管理器不算一个典型的程序) 这是因为手头的任务被分解为子任务,无论出于何种原因,这些子任务都被放入子流程中。例如,在实现多次遍历型编译器/链接器时,其中每次遍历都…...

【算法】高精度

作者:指针不指南吗 专栏:算法篇 🐾不能只会思路,必须落实到代码上🐾 文章目录前言一、高精度加法二、高精度减法三、高精度乘法四、高精度除法前言 ​ 高精度即很大很大的数,超过了 long long 的范围&…...

计算机网络-基本概念

目录 计算机网络-基本概念 互联网 Java的跨平台原理 ​编辑 C\C的跨平台原理 解释性语言的跨平台原理(python,js等) 客户端 vs 服务器 什么是协议? 网络互连模型 请求过程 计算机之间的通信基础 计算机之间的连接方式-网线直连(需要用交叉线,而…...

你评论,我赠书~【哈士奇赠书 - 13期】-〖Python程序设计-编程基础、Web开发及数据分析〗参与评论,即可有机获得

大家好,我是 哈士奇 ,一位工作了十年的"技术混子", 致力于为开发者赋能的UP主, 目前正在运营着 TFS_CLUB社区。 💬 人生格言:优于别人,并不高贵,真正的高贵应该是优于过去的自己。💬 &#x1f4e…...

【设计模式】我终于读懂了代理模式。。。

👦代理模式的基本介绍 1)代理模式:为一个对象提供一个替身,以控制对这个对象的访问。即通过代理对象访问目标对象,这样做的好处是:可以在目标对象实现的基础上,增强额外的功能操作,即扩展目标对象的功能。 2)被代理的对象可以是远程对象、创建…...

每天10个前端小知识 【Day 2】

👩 个人主页:不爱吃糖的程序媛 🙋‍♂️ 作者简介:前端领域新星创作者、CSDN内容合伙人,专注于前端各领域技术,成长的路上共同学习共同进步,一起加油呀! ✨系列专栏:前端…...

帮助中心在线制作工具推荐这4款,很不错哟!

根据用户咨询问题是否解决的情景,分为三个部分,首先帮助中心恰好有用户需要咨询的问题,用户可以通过点击相关问题即可解决自己的问题,其次,用户第一眼没有在帮助中心解决问题,有个搜索框,用户的…...

rabbitMQ相关文章汇总

RabbitMQ五种工作模式: https://blog.csdn.net/weixin_41882200/article/details/117128590?ops_request_misc%257B%2522request%255Fid%2522%253A%2522167625223516800182771874%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id1…...

【C++】异常

🌈欢迎来到C专栏~~异常 (꒪ꇴ꒪(꒪ꇴ꒪ )🐣,我是Scort目前状态:大三非科班啃C中🌍博客主页:张小姐的猫~江湖背景快上车🚘,握好方向盘跟我有一起打天下嘞!送给自己的一句鸡汤&#x1…...

@Validated注解不生效问题汇总

Validated注解不生效问题汇总 文章目录Validated注解不生效问题汇总背景:一:可能原因原因1:原因2:原因3:原因4:二:补充全局异常对validation的处理背景: 项目框架应用的是validatio…...

华科万维C++章节练习2_4

题目:编写程序,从键盘输入一个字符,然后在屏幕上输出该字符开头的连续3个字符以及对应ASCII码。 输出格式请参看: 请输入一个字符>>A 字符 ASCII码 A 65 B 66 C 67 请按任意键继续. . . 请直接…...

17万字数字化医院信息化建设大数据平台建设方案WORD

【版权声明】本资料来源网络,知识分享,仅供个人学习,请勿商用。【侵删致歉】如有侵权请联系小编,将在收到信息后第一时间删除!完整资料领取见文末,部分资料内容: 目录 第1章 医院信息化概述 1.…...

Android 11系统签名修改

Android OS 映像在两个地方使用加密签名:映像中的所有 .apk 文件都必须经过签名。Android 软件包管理器通过下列两种方式使用 .apk 签名:更换应用时,必须使用与旧应用相同的密钥对其签名,才能存取旧应用的数据。无论是通过覆盖 .a…...

亚马逊、沃尔玛卖家自养号退款经验和测评技术

今天给大家介绍下在做亚马逊、沃尔玛退款自养号中的经验,众所周知,自养号最重要的是养号的环境,包括系统的纯净度,下单的信用卡以及其他的一些细节。 环境系统市面上有很多,鱼龙混杂,比如什么lumi&#xf…...

Spring Security in Action 第十一章 SpringSecurity前后端分离实战

本专栏将从基础开始,循序渐进,以实战为线索,逐步深入SpringSecurity相关知识相关知识,打造完整的SpringSecurity学习步骤,提升工程化编码能力和思维能力,写出高质量代码。希望大家都能够从中有所收获&#…...

高级前端二面vue面试题(持续更新中)

action 与 mutation 的区别 mutation 是同步更新, $watch 严格模式下会报错 action 是异步操作,可以获取数据后调用 mutation 提交最终数据 MVVM的优缺点? 优点: 分离视图(View)和模型(Model)&#xff…...

七大设计原则之依赖倒置原则应用

目录1 依赖倒置原则2 依赖倒置应用1 依赖倒置原则 依赖倒置原则(Dependence Inversion Principle,DIP)是指设计代码结构时,高层模块不应该依赖底层模块,二者都应该依赖其抽象。抽象不应该依赖细节;细节应该依赖抽象。…...

Dubbo面试题2023

1、为什么要用Dubbo 随着服务化的进一步发展,服务越来越多,服务之间的调用和依赖关系也越来越复杂,诞生了面向服务 的架构体系(SOA),也因此衍生出了一系列相应的技术,如对服务提供、服务调用、连接处理、通信协议、 …...

Swift(5)

目录 集合类型 数组 ​编辑 合集 合集操作 字典 Where 集合类型 Swift提供了三种主要的集合类型:组合,合集,字典。 数组是有序的值的集合。 合集是唯一值的无序集合。 字典是无序的键值对集合。 数组 Swift数组的类型的完整写法是…...

wordpress如何设置头像/2023年6月疫情恢复

1、安装VS Code 官网下载安装 2、配置python 安装插件 Python 插件 配置launch.json 配置tasks.json 关于tasks.json配置请参开官方文档 经过以上配置你就可以使用Vs code 来开发Python 程序了!! Vs code 这个开发工具真的是很好用,很多丰富…...

广西住房和城乡建设厅网站首页/国内最新新闻事件

用户数据表&#xff0c;每个用户有一个或者多个权限&#xff0c;用户表如下 userid,roleid,username等 权限枚举如下&#xff1a; public class CustomEnum { [Flags] /// <summary> /// 用户角色枚举 /// </summary> publi…...

上海公司注册核名查询/黑帽seo教程

为什么80%的码农都做不了架构师&#xff1f;>>> 首先说一下Redis公认的特点&#xff1a; Redis支持数据的持久化&#xff0c;可以将内存中的数据保持在磁盘中&#xff0c;重启的时候可以再次加载进行使用。Redis不仅仅支持简单的key-value类型的数据&#xff0c;同…...

wordpress点击图片/码迷seo

Kotlin中的高阶函数 一、函数式编程概念二、高阶函数1.函数对变量进行赋值2.函数作为参数3.函数作为返回值一、函数式编程概念 又称泛函编程,即比一般函数更加抽象的概念(学过泛函分析的应该都懂吧),将计算机运算视为数学上的函数运算,基础就是利用lambda表达式进行运算。 …...

description+wordpress/销售平台排名

在上一篇(博客园的神回复&#xff0c;一起看看那些IT男的神回复[连载][一])中(ps: 这篇博客之所以改名是因为这次的神回复里有程序媛&#xff0c;所以用IT男不太合适)&#xff0c;博客园神回复还是挺受欢迎的&#xff0c;上一篇博客的神回复取材均来自博问区&#xff0c;在这篇…...

哪个购物网站最便宜/设计一个公司网站多少钱

周虎摘 要&#xff1a;JWT(JsonWebToken)认证作为一种服务器端无状态验证方式&#xff0c;在分布式开发中得到了广泛的应用。但是&#xff0c;由于token信息的本身特点&#xff0c;支持的有效时间是固定的&#xff0c;当在token有效时间内用户操作没有完成&#xff0c;操作就会…...