js中的Formdata数据结构

这里写目录标题

  • 一、基本概念
    • 二、常用方法
      • 1.append(name, value)、set(name, value)
      • 2.get()、getAll()
      • 3.has(name)
      • 4.delete(name)
      • 5.keys(),values(),entries()
    • 三、其他细节
      • 1.for of遍历
      • 2.转为对象
      • 3.结合 URLSearchParams 转为queryString

一、基本概念

FormData 提供了一种表示表单数据的 key/value 的构造方式,主要方便我们用 XMLHttpRequest 来发送数据。我们主要用它来作为上传文件的接口数据,因为结合 ‘multipart/form-data’ 请求类型,能实现与后端的流式传输。
构造函数:FormData(form?: HTMLFormElement, submitter?: (HTMLElement | null))

  • form:表单dom元素
  • submitter:提交按钮dom元素

实例化:const formdata = new FormData()

二、常用方法

1.append(name, value)、set(name, value)

append(name: string, value: string | Blob)
append(name: string, value: string | Blob)
append可以给FormData添加数据(支持字符串以及文件Blob类型数据),如果name存在则是追加一条数据。这里我们要与常规的对象数据结构区分开了,FormData的key不是唯一的,它可以存在多个相同的key。

const formData = new FormData()
formData.append('name', '张三')
formData.append('name', '李四')
formData.append('name', '王五')

注意:这里的值并不会相互覆盖,而是不断地追加到FormData中
set同样可以给formData添加数据,但是如果name存在,则会修改数据

const formData = new FormData()
formData.set('name', '张三')
formData.set('name', '李四') // 会覆盖前面的值formData.append('age', '11')
formData.set('age', '12') // 会覆盖前面的值

2.get()、getAll()

获取数据,区别就是get是获取name下的第一个值,而getAll则获取所有值

const formData = new FormData()
formData.append('age', '11')
formData.append('age', '33')
console.log(formData.get('age')); // 11
console.log(formData.getAll('age')); // ['11', '33']
formData.set('age', '12')
formData.set('age', '22')
console.log(formData.get('age')); // 22
console.log(formData.getAll('age')); // ['22']

3.has(name)

判断是否有FormData中是否包含name

const formData = new FormData()
formData.append('age', '33')
console.log(formData.has('age')); // true
console.log(formData.has('name')); // false

4.delete(name)

删除某个name属性,即使你append了多个相同的name属性,也会全部删除。

const formData = new FormData()
formData.append('age', '11')
formData.append('age', '33')
formData.delete('age') // []
console.log(formData.getAll('age'));
formData.set('name', '张三')
formData.delete('name')
console.log(formData.getAll('name')); // []

5.keys(),values(),entries()

获取FormData中的所有key、所有value和所有的[key,value]的iterator对象

  const formData = new FormData()formData.append('age', '11')formData.append('age', '33')formData.set('name', '张三')formData.set('name', '李四')const keys = formData.keys()console.log(keys);console.log([...keys]);const values = formData.values()console.log(values);console.log(...values);const entries = formData.entries()console.log(entries);console.log([...entries]);

在这里插入图片描述

我们可以看到,key是有多个的。

三、其他细节

1.for of遍历

FormData本身就是一个Iterator对象,所以我们可以直接使用for of遍历,同样也可以直接使用 …运算符展开。

  const formData = new FormData()formData.append('age', '11')formData.append('age', '33')formData.set('name', '张三')for (const item of formData) {console.log(item)}console.log([...formData]);const entries = formData.entries()console.log([...entries]);

在这里插入图片描述

事实上,FormData的iterator遍历返回的值就是formData.entries()

2.转为对象

FormData也可以快捷的转为常规对象数据,但是对象的key是唯一的,所以FormData重复的数据会丢失

  const formData = new FormData()formData.append('age', '11')formData.append('age', '33')formData.set('name', '张三')console.log(Object.fromEntries(formData.entries()));

在这里插入图片描述

3.结合 URLSearchParams 转为queryString

因为FormData本身就是为了方便前端与后端进行接口交互的,所以可以直接作为实例化 URLSearchParams的参数,然后转为queryString。
不过这种场景现实情况中用的不多,毕竟大家还是主要用FormData进行文件上传。

  const formData = new FormData()formData.append('age', '11')formData.append('age', '33')formData.set('name', '张三')console.log(new URLSearchParams(formData).toString())

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/120839.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

p5.js画布操作实战:创建,绑定指定元素,动态调整大小,隐藏滚动条,删除画布

文章简介 之前在 《p5.js 光速入门》 里粗略讲过一下如何使用 p5.js 创建画布。 这次要介绍几个 p5.js 提供的画布相关的方法。 创建画布时的相关配置。让画布绑定指定元素。重置画布大小。删除画布。 学习本文前你需要具备一点 p5.js 的知识,想了解的请查看 《p…

【Java 进阶篇】Java Request 继承体系详解

在Java编程中,Request(请求)是一个常见的概念,特别是在Web开发中。Request通常用于获取来自客户端的信息,以便服务器能够根据客户端的需求提供相应的响应。在Java中,Request通常涉及到一系列类和接口&#…

CAS 机制的实现原理分析

在 synchronized 中很多地方都用到了CAS机制,它的叫法有很多,比如CompareAndSwap、CompareAndExchange、CompareAndSet,它是一个能够进行比较和替换的方法,这个方法能够在多线程环境下保证对一个共享变量进行修改时的原子性不变。…

CentOS 编译安装TinyXml2

安装 TinyXml2 Git 源码下载地址:https://github.com/leethomason/tinyxml2 步骤1:首先,你需要下载tinyxml2的源代码。你可以从Github或者源代码官方网站下载。并上传至/usr/local/source_code/ 步骤2:下载完成后,需要将源代码解…

『力扣刷题本』:合并两个有序链表(递归解法)

一、题目 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1: 输入:l1 [1,2,4], l2 [1,3,4] 输出:[1,1,2,3,4,4]示例 2: 输入:l1 [], l2 [] 输出&#x…

Python---练习:使用for循环实现用户名+密码认证

案例: 用for循环实现用户登录 ① 输入用户名和密码 ② 判断用户名和密码是否正确(usernamelaowang,passwordlw123) ③ 登录仅有三次机会,超过3次会报错 思考: 用户登陆情况有3种: ① 用户名错误(此时…

Python OpenCV将n×n的小图拼接成m×m的大图

Python OpenCV将nn的小图拼接成mm的大图 前言前提条件相关介绍实验环境n \times n的小图拼接成m \times m的大图代码实现 前言 由于本人水平有限,难免出现错漏,敬请批评改正。更多精彩内容,可点击进入Python日常小操作专栏、OpenCV-Python小…

J2EE项目部署与发布(Windows版本)

一、单机项目 1.将项目共享到虚拟机 2.解压并将war包放入tomcat 3.运行tomcat并查看该项目的数据库配置 4.数据库导入脚本 先创建一个符合项目数据库配置的数据库名称 然后就是将项目脚本数据传输过去即可,如下: 项目数据传输过来了之后,我们…

分组卷积的思想神了

大家好啊,我是董董灿。 最近,分组卷积帮我解决了一个大忙,事情是这样的。 这几天遇到一个头疼的问题,就是要在某一芯片上完成一个神经网络的适配,这个神经网络中卷积居多,并且有一些卷积的通道数很大&…

React之服务端渲染

一、是什么 在SSR中 (opens new window),我们了解到Server-Side Rendering ,简称SSR,意为服务端渲染 指由服务侧完成页面的 HTML 结构拼接的页面处理技术,发送到浏览器,然后为其绑定状态与事件,成为完全可…

番外8.2 --- 后续

### 01:dd命令:在新挂载点创建swap文件大小10MB;(dd if/dev/zero of/swap bs1024 count10240) 02:给swap建立文件系统,将其分属到swap文件(mkswap /swap; swapon /swap &…

【linux系统】服务器安装Pycharm

文章目录 安装pycharm步骤1. 进入pycharm官网2. 上传到服务器3. 安装过程 摘要:pycharm是Python语言的图形化开发工具。因为如果在Linux环境下的Python shell 中直接进行编程,其无法保存与修改,在大型项目当中这是很不方便的,而py…

KV STUDIO的安装与实践(一)

目录 什么是KV STUDIO? 如何安装KV STUDIO? 如何学习与使用KV STUDIO(在现实中的应用)? 应用一(在现实生活中机器内部plc的读取与替换) 读取 KV STUDIO实现显示器的检测!&#…

Android拖放startDragAndDrop拖拽onDrawShadow动态添加View,Kotlin(3)

Android拖放startDragAndDrop拖拽onDrawShadow动态添加View,Kotlin(3) import android.content.ClipData import android.graphics.Canvas import android.graphics.Point import android.os.Bundle import android.util.Log import android.…

北邮22级信通院数电:Verilog-FPGA(7)第七周实验(1):带使能端的38译码器全加器(关注我的uu们加群咯~)

北邮22信通一枚~ 跟随课程进度更新北邮信通院数字系统设计的笔记、代码和文章 持续关注作者 迎接数电实验学习~ 获取更多文章,请访问专栏: 北邮22级信通院数电实验_青山如墨雨如画的博客-CSDN博客 关注作者的uu们可以进群啦~ 目录 方法一&#xff…

泛微OA之获取每月固定日期

文章目录 1.需求及效果1.1需求1.2效果 2. 思路3. 实现 1.需求及效果 1.1需求 需要获取每个月的7号作为需发布日期,需要自动填充1.2效果 自动获取每个月的七号2. 思路 1.功能并不复杂,可以用泛微前端自带的插入代码块的功能来实现。 2.将这需要赋值的…

LVS集群-NAT模式

集群的概念: 集群:nginx四层和七层动静分离 集群标准意义上的概念:为解决特定问题将多个计算机组合起来形成一个单系统 集群的目的就是为了解决系统的性能瓶颈。 垂直扩展:向上扩展,增加单个机器的性能,…

【java学习—九】工厂方法FactoryMethod(6)

文章目录 1. 概念2. 实际的应用 1. 概念 FactoryMethod 模式是设计模式中应用最为广泛的模式,在面向对象的编程中,对象的创建工作非常简单,对象的创建时机却很重要。 FactoryMethod 解决的就是这个问题,它通过面向对象的手法&…

BUUCTF zip伪加密 1

BUUCTF:https://buuoj.cn/challenges 题目描述: 下载附件,得到一个zip压缩包。 密文: 解题思路: 1、刚开始尝试解压,看到了flag.txt文件,但需要解压密码。结合题目,确认这是zip伪加密&#…

Makefile 基础教程:从零开始学习

在软件开发过程中,Makefile是一个非常重要的工具,它可以帮助我们自动构建程序,管理程序依赖关系,提高开发效率。本篇博客将从基础开始,介绍Makefile的相关知识,帮助大家快速掌握Makefile的使用方法 Makefil…