之前使用formData都是在network中查看参数,最近在做一个项目,接口还没有,用的假数据做的交互,突发奇想的console.log了 一下,结果是空的。

一开始以为append失效了,经过查证原来:FormData是一种特殊类型的对象,它不可字符串化,不能仅使用console.log打印出来。

如果需要打印可以:

formData.forEach((value, key) => {
console.log("key %s: value %s", key, value);
})

FormData常用方法:

一.创建一个formData对象实例的方式
1、创建一个空对象 var formData = new FormData();//通过append方法添加数据
1
2、使用已有表单来初始化对象 //表单示例
<form id="myForm" action="" method="post">
<input type="text" name="name">名字
<input type="password" name="psw">密码
<input type="submit" value="提交">
</form> //方法示例
// 获取页面已有的一个form表单
var form = document.getElementById("myForm");
// 用表单来初始化
var formData = new FormData(form);
// 我们可以根据name来访问表单中的字段
var name = formData.get("name"); // 获取名字
var psw = formData.get("psw"); // 获取密码
// 当然也可以在此基础上,添加其他数据
formData.append("token","kshdfiwi3rh"); 二. 操作方法
formData里面存储的数据是以健值对的形式存在的,key是唯一的,一个key可能对应多个value。
如果是使用表单初始化,每一个表单字段对应一条数据,它们的HTML name属性即为key值,它们value属性对应value值。
1.获取值 //通过get(key)/getAll(key)来获取对应的value
formData.get("name"); // 获取key为name的第一个值
formData.get("name"); // 返回一个数组,获取key为name的所有值 //通过append(key, value)来添加数据,如果指定的key不存在则会新增一条数据,如果key存在,则添加到数据的末尾
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v3");
获取值时方式及结果如下 formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v3"]
3.设置修改数据 //set(key, value)来设置修改数据,如果指定的key不存在则会新增一条,如果存在,则会修改对应的value值
formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]
4.判断是否存在对应数据 //has(key)来判断是否对应的key值
formData.append("k1", "v1");
formData.append("k2",null); formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false
5.删除数据 //delete(key)删除数据
formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v1");
formData.delete("k1"); formData.getAll("k1"); // []

最新文章

  1. python随心笔记
  2. JavaScript资源大全中文版(Awesome最新版--转载自张果老师博客)
  3. Appium之python API
  4. 30天C#基础巩固----程序集,反射
  5. SQL2008&quot;阻止保存要求重新创建表的更改&quot;问题的解决
  6. Python3基础 print 查看一个列表中存储的所有内容
  7. 用c#开发微信 (8) 微渠道 - 推广渠道管理系统 3 UI设计及后台处理
  8. 搭建SSH框架所需Jar包及其解释
  9. 详细讲解 关于Linux静态库和动态库的分析
  10. OpenGL ES 2.0 顶点着色器的妙用
  11. ListView.setOnItemClickListener无效
  12. 整理一些常用函数库PHP版本
  13. Hadoop 使用FileSystem API 读取数据
  14. windows 10 下使用 binwalk
  15. ZeroC Ice IceGrid Node和IceGrid
  16. linux串口编程设置(转载)
  17. Jenkins问题记录:android构建时提示Unzipping /home/.gradle/wrapper/dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9/gradle-3.3-all.zip to /home/.gradle/wrapper/dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9 Except
  18. Shiro权限管理框架
  19. 安装Ruby、Sass在WebStrom配置Scss编译环境css自动压缩
  20. [No000015C]计算机科学关键领域

热门文章

  1. JMeter性能监控插件PerfMon Metrics Collector
  2. Notability
  3. win10下GO的环境配置
  4. matlab仿真随机数的产生
  5. comTest.json文件中内容,被NewsList.vue文件引入
  6. C#排序算法的实现---快速排序
  7. java线程池之synchronized锁
  8. Python 文件&amp;异常 初学者笔记
  9. ES6基础与解构赋值(高颜值弹框小案例!)
  10. Vue(三)--循环语句