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

我们先看一个小例子：

html代码：

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

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

传统JS写法：

看一下效果：

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

FormData的JS写法：

效果如下：

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

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

FormData的常用 *** 作方法：

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

可以用PHP获取，form表单里<form action="xxx.php" method="get或者post"

>

<input type="xxx" name="随便取个名字">

<input type="submit">

然后PHP里

定义一个变量$one=$_GET(如果前端是post就改成post)["随便取的名字"]；

然后表单里的数据就截获到$one里了

<script type="text/javascript">

  // 获取指定form中的所有的<input><select>对象

  function getElements(formId) {

      var form = document.getElementById(formId)

      if(form == null){

          return false

      }

      var elements = new Array()

      var inputTagElements = form.getElementsByTagName('input')

      for (var j = 0j <inputTagElements.lengthj++) {

          elements.push(inputTagElements[j])

      }

      var selectTagElements = form.getElementsByTagName('select')

      for (var j = 0j <selectTagElements.lengthj++) {

          elements.push(selectTagElements[j]) 

      }

      return elements

  }

扩展资料：

form表单提交

在form标签中添加Action(提交的地址)和method(post)，且有一个submit按钮。

（<input type='submit'>）就可以进行数据的提交，每一个input标签都需要有一个name属性，才能进行提交。

当点击登陆时，向数据库发生的数据是：username=username&password=password.

这种默认的提交方式，一般会进行页面的跳转(不成功时跳转到当前页面)。而有时候是对d出框进行数据提交的，希望提交成功则关闭d出框并刷选父页面，失败则提示失败原因，且d出框不关闭。此时可以采用Ajax进行数据提交。

---