我是小渔歌,点击右上方“关注”,每天为你分享【前端技术知识】干货。
FormData是浏览器window对象下面的一个构造函数。
功能:实现表单元素的序列化,减少表单数据的拼接。
先贴上dom结构,下面再一一讲解。
dom结构
图例
let formData = new FormData(document.querySelector("#formBox"));
控制台输出结果
可以看到这个formData下面有很多操作方法。
let username = formData.get("username")
let job = formData.get("job")
let desc = formData.get("desc")
控制台打印
let username = formData.getAll("username")
let job = formData.getAll("job")
let desc = formData.getAll("desc")
控制台打印
由此可见,getAll返回的是一个数组,get返回的是一个字符串。
注意:getAll获取的是具有相同name(key)属性表单元素的值,所以返回的是一个数组。
formData.append("interest", "篮球")
let interest = formData.get("interest")
控制台输出
formData.append("interest", "篮球")
formData.append("interest", "写作")
let interest = formData.get("interest")
let interestAll = formData.getAll("interest")
控制台输出
这里向键interest添加了两个不同值,如果用get只能获取第一个值,getAll则能获取说有的值。
到这里应该很清楚get与getAll的区别了吧。
formData.set("interest", "技术学习")
interest = formData.get("interest")
interestAll = formData.getAll("interest")
这里我们改变2中的interest,看下控制台输出结果。
可以看到他改变了interest的值,并且之前我们给interest添加的是两个值,现在少了一个,由此可见,这个set方法会重置多个值变成一个值。
let isUsername = formData.has("username")
let iswork = formData.has("work")
控制台输出
username存在所以输出了true,work不存在所以是false。
isUsername = formData.has("username")
username = formData.get("username")
控制台输出
使用delete方法删除username后,再用has方法检测到,这个username已经不存在了,并且用get方法也获取不到了。
formData.forEach((value, key) => {
console.log(value, key)
})
控制台输出
for (let value of formData.values()) {
console.log(value); // 返回所有 value
}
控制台输出
for (let key of formData.keys()) {
console.log(key);
}
控制台输出
for (let obj of formData.entries()) {
console.log(obj);
}
控制台输出
如上图这个每一个都返回一个数组,第一个索引是键,第二个索引是值。
还有一个点需要注意的地方,就是如果一个key有多个值,他不会在数组第三个索引出现,数组的长度永远是2。
如下图所示,如果3没有重置interest的值,他还是两个,则控制台输出
异步数据提交,使用formData是不是非常nice,[中国赞]。
思考:formData也可以定义一个空的对象,实现自定义表单提交。
CSS实现拖拽功能,你是认真的吗?
能用CSS实现的效果,就尽量把Javascript踢开吧?
在JavaScript中call与apply的实际应用你知道多少?
小渔歌,90后前端研发工程师,热爱生活,一个在劳动中不断学习的人,愿我们共同进步,点关注不迷路[中国赞][作揖]。
页面更新:2024-05-04
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号