龙空技术网

FormData对象,知道吗?它可以让你在表单数据处理上事半功倍?

前端小渔歌 1116

前言:

当前兄弟们对“form表单提交的返回结果”大体比较关心,你们都想要知道一些“form表单提交的返回结果”的相关资讯。那么小编也在网上收集了一些关于“form表单提交的返回结果””的相关文章,希望同学们能喜欢,我们快快来学习一下吧!

我是小渔歌,点击右上方“关注”,每天为你分享【前端技术知识】干货。

FormData是浏览器window对象下面的一个构造函数。

功能:实现表单元素的序列化,减少表单数据的拼接。

先贴上dom结构,下面再一一讲解。

dom结构

<form id="formBox">    <p>姓名:<input type="text" name="username" value="小渔歌"></p>    <p>职位:<select name="job">      <option value="1">前端研发工程师</option>      <option value="2">java开发工程师</option>      <option value="3">大数据工程师</option>      <option value="4">算法工程师</option>    </select></p>    <p><textarea name="desc" cols="30" rows="10">我是小渔歌,点击右上方“关注”,每天为你分享【前端技术知识】干货。</textarea></p>    <p><input type="button" id="btn" value="获取表单的值"></p></form>

图例

表单图示

通过表单对formData进行初始化

let formData = new FormData(document.querySelector("#formBox"));

控制台输出结果

可以看到这个formData下面有很多操作方法。

通过get(key)与getAll(key)来获取相对应的值

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)属性表单元素的值,所以返回的是一个数组。

2、通过append(key,value)在数据末尾追加数据

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的区别了吧。

3、通过set(key, value)来设置修改数据

formData.set("interest", "技术学习")interest = formData.get("interest")interestAll = formData.getAll("interest")

这里我们改变2中的interest,看下控制台输出结果。

可以看到他改变了interest的值,并且之前我们给interest添加的是两个值,现在少了一个,由此可见,这个set方法会重置多个值变成一个值。

4、通过has(key)来判断是否存在对应的key值

let isUsername = formData.has("username")let iswork = formData.has("work")

控制台输出

username存在所以输出了true,work不存在所以是false。

通过delete(key)可以删除数据

isUsername = formData.has("username")username = formData.get("username")

控制台输出

使用delete方法删除username后,再用has方法检测到,这个username已经不存在了,并且用get方法也获取不到了。

forEach (value,key)=> 遍历FormData 对象的键值

formData.forEach((value, key) => {            console.log(value, key)})

控制台输出

values => 返回一个包含所有值的iterator对象。

 for (let value of formData.values()) {            console.log(value); // 返回所有 value}

控制台输出

keys => 返回一个包含所有键的iterator对象

for (let key of formData.keys()) {            console.log(key);}

控制台输出

entries => 返回一个包含所有键值对的iterator对象

for (let obj of formData.entries()) {            console.log(obj);}

控制台输出

如上图这个每一个都返回一个数组,第一个索引是键,第二个索引是值。

还有一个点需要注意的地方,就是如果一个key有多个值,他不会在数组第三个索引出现,数组的长度永远是2。

如下图所示,如果3没有重置interest的值,他还是两个,则控制台输出

异步数据提交,使用formData是不是非常nice,[中国赞]。

思考:formData也可以定义一个空的对象,实现自定义表单提交。

往期精彩内容

CSS实现拖拽功能,你是认真的吗?

能用CSS实现的效果,就尽量把Javascript踢开吧?

在JavaScript中call与apply的实际应用你知道多少?

小渔歌,90后前端研发工程师,热爱生活,一个在劳动中不断学习的人,愿我们共同进步,点关注不迷路[中国赞][作揖]。

标签: #form表单提交的返回结果 #js提交表单后怎么获取返回值 #form表单提交的数据后服务端可以利用什么