山海科技发展网

07月25日科技常识:FormData控制台打印为空及使用方法

导读 摘要 今天小编跟大家讲解下有关FormData控制台打印为空及使用方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关FormData...
摘要 今天小编跟大家讲解下有关FormData控制台打印为空及使用方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关FormData控制台

今天小编跟大家讲解下有关FormData控制台打印为空及使用方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关FormData控制台打印为空及使用方法 的相关资料,希望小伙伴们看了有所帮助。

之前使用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方法添加数据12、使用已有表单来初始化对象 //表单示例<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)来获取对应的valueformData.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"); // trueformData.has("k2"); // trueformData.has("k3"); // false5.删除数据 //delete(key)删除数据formData.append("k1", "v1");formData.append("k1", "v2");formData.append("k1", "v1");formData.delete("k1"); formData.getAll("k1"); // []

来源:爱蒂网