HTML 中 AJAX 的 FormData 对象介绍和使用

Question

通常我们提交表单时，会把 form 中的所有表格元素的 name 与 value 组成一个 queryString，提交到后台。这用 jQuery 的方法来说，就是 serialize。但当我们使用 Ajax 提交时，这过程就要变成人工的了。因此 FormData 对象的出现可以减少我们一些工作量。

想得到一个 FormData 对象，很简单：

formdata = new FormData();

但一个空的 FormData 对象对我们没有意义，因此 W3c 草案提供了三种方案来获取或修改 FormData。

示例1：创建一个空的 FormData 对象，然后再用 append 方法逐个添加键值对：

var formdata = new FormData();
formdata.append("name", "问说"); 
formdata.append("blog", "http://www.wenjiangs.com");

示例2：取得 form 元素对象，将它作为参数传入 FormData 对象中。

var formobj =  document.getElementById("form");
var formdata = new FormData(formobj);

示例3：利用 form 元素对象的 getFormData 方法生成它。

var formobj =  document.getElementById("form");
var formdata = formobj.getFormData()

注意，formdata 是一个不透明的对象，现在暂时只有一个 append 可以操作，不能通过序列化手段得到其里面的内容，这实在是遗憾。它的用法现在也只有一个，用于增强型的 XMLHttpRequest 对象的 send 方法中去。

var formElement = document.getElementById("myFormElement");
formData = formElement.getFormData();
formData.append("serialnumber", serialNumber++);
xhr.send(formData);