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

发布于 2018-03-09 00:36:28 字数 1513 浏览 2418 评论 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);

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。