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

我们先看一个小例子：

html代码：

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

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

传统JS写法：

看一下效果：

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

FormData的JS写法：

效果如下：

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

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

FormData的常用 *** 作方法：

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

JS获取form表单里的数据并输出的方法：

documentgetElementById("ddd")innerHTML = documentgetElementById("xxx")value + documentgetElementById("yyy")value;

将表单数据获取好后进行拼接赋给某个dom节点显示出来。

js获取表单数据命令是：documentgetElementById("xxx")value;

输出表单数据到某个dom元素内是使用：documentgetElementById("ddd")innerHTML;

因此要使用js输出表单数据可以先讲表单数据整合临时存储到某个变量，在统一输出到某个dom节点内

举例：

<form id="fm" name="fm">

<input type="text" id="name" />

<input type="text" id="tel" />

<input type="button" onClick="fmResult()" />

</form>

输出表单值：<div id="d"></div>

js:

<script>

function fmResult(){

var name = documentgetElementById("name")value;

var tel = documentgetElementById("tel")value;//获取值

documentgetElementById("d")innerHTML = name + tel;//输出表单值

}

</script>

以上就是关于前端小技巧：学会用FormData对象收集表单数据全部的内容，包括:前端小技巧：学会用FormData对象收集表单数据、JS部分怎么写才能把form表单里的数据输出出来、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！