前端小技巧:学会用FormData对象收集表单数据

如题所述

我们先看一个小例子:

html代码:

需求:是获取form表单中的用户名和密码并包装成一个对象

这个需求是我们大部分时候在发送ajax请求时需要做的一个工作。

传统JS写法:

看一下效果:

可以看到,我们已经实现了需求,但是我们写的JS代码很繁琐,我们需要先获取form表单中input框元素,然后元素的value值,最后包装成一个对象。

FormData的JS写法:

效果如下:

通过这个例子你应该能感受到FormData的便利性,只需要 new FormData(form) 一句代码就可以把form表单内的所有信息都以键值对的形式包装成一个对象返回。

FormData对象是用来将form表单数据编译成键值对,这么做有两个好处:

FormData的常用操作方法:

FormData对象可以帮我们更方便的收集表单数据并中的整理成对象,大大方便了我们发送ajax请求。

温馨提示:答案为网友推荐,仅供参考