HTML 中 AJAX 的 FormData 对象介绍和使用 - 文章教程

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

发布于 2018-03-09 字数 1795 浏览 2273 评论 0

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

HTML 中 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);

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3