FormData 类型

最近在学习红宝书第四版24章节的 xhr部分，提到了XMLHttpRequest Level 2的 FormData 类型。以前只是有个印象，现在来仔细的了解一下：

现代 Web 应用程序中经常需要对表单数据进行序列化，因此 XMLHttpRequest Level 2 新增了
FormData 类型。

FormData 类型便于表单序列化，也便于创建与表单类似格式的数据然后通过 XHR
发送。下面的代码创建了一个 FormData 对象，并填充了一些数据：

let data = new FormData();
data.append("name", "Nicholas");

append() 方法接收两个参数：键和值，相当于表单字段名称和该字段的值。可以像这样添加任意
多个键/值对数据。

此外，通过直接给 FormData 构造函数传入一个表单元素，也可以将表单中的数据作为键/值对填充进去：

let data = new FormData(document.forms[0]);

有了 FormData 实例，可以像下面这样直接传给 XHR 对象的 send() 方法：

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("post", "postexample.php", true);
let form = document.getElementById("user-info");
xhr.send(new FormData(form));

在运行上面这段代码的时候一直执着的想看看new FormData(form)这个输出的结果，结果输出空，

如下图：

然后群里问了大佬们，大佬们给出的回答，需要用get获取

下面可以输出值了，根据属性获取相应的值

<form action="" id = "user-info"><input type="text" id = "username" name = "username" placeholder="username"><input type="text" id = "password" name = "password" placeholder="password"><button type = "button" id = "submitBtn">click</button></form>

$("#submitBtn").click(function(){let form = document.getElementById("user-info");console.log(new FormData(form).get("username"));var data = new FormData(form);console.log(data.get("username"));console.log(data.get("password"))})

使用 FormData 的另一个方便之处是不再需要给 XHR 对象显式设置任何请求头部了。XHR 对象能
够识别作为 FormData 实例传入的数据类型并自动配置相应的头部。

好了，记录完毕。

FormData 类型相关推荐

接口传参为formData类型，实现文件/图片上传功能
接口传参为formData类型,实现文件/图片上传功能摘要: 前端小白工作中第一次遇到了上传图片的需求,一看后台接口需要传formData类型参数. const formData = new win ...
post multipart/form-data 类型表单如何获取File外其他参数
参考资料: post multipart/form-data 类型表单如何获取File外其他参数:https://www.douban.com/note/536231506/ multipart/f ...
python 处理数据类型data_python处理multipart/form-data类型请求
说起content-type为multipart/form-data类型的请求,这个通常我们是用来做文件上传类的.当然也有因为请求数据大过大采用这种类型,那么我们可以像x-www-form-urle ...
python post 表单类数据_python post content-type:multipart/form-data 类型的表单数据
表单数据post默认为application/x-www-form-urlencode,可以为标签加入属性enctype=multipart/form-data,使得post的数据按multipar ...
ajax传formdata类型的数据_JQuery.Ajax()的data参数类型
假如现在有这样一个表单,是添加元素用的. 用户名: 手机号: 生日: 我们不想使用表单submit的方式添加这个元素,我们就想使用ajax提交. 以前我们是这样实现的: 1 2 3 4 5 6 7 8 ...
python requests form data_Python requests模块 multipart/form-data类型文件上传
------WebKitFormBoundarytqaIYaLC4rpPRnpl Content-Disposition: form-data; name="isNew" 1 ...
mimemultipart java_H5提交MIME类型为multipart/form-data类型的表单，后端如何处理（比如java，.NET）？...
桃花长相依 /** * 上传图片接口,任务详情的插图和评论的插图都用 * * @param request * @param taskId * @param taskDiscussId * @retu ...
application/x-www-form-urlencoded multipart/form-data text/plain 的区别和作用
我们知道在通过POST方式向服务器发送AJAX请求时最好要通过设置请求头来指定为application/x-www-form-urlencoded编码类型.知道通过表单上传文件时必须指定编码类型为&q ...
HTTP协议之post multipart/form-data数据类型实例
首先,说这个问题之前吐槽一下网上的文章,做这个东西的时候几乎看了所有的博客,没一个说到点上的,太笼统,也不完整,我就在想等我做好一定要写篇完整的文章,其实最好的源码就是提供的demo. 1.先说下问题 ...

FormData 类型

FormData 类型相关推荐

最新文章

热门文章