使⽤FormData对form表单序列化⼀、FormData作⽤
1. 将form表单元素的name与value进⾏组合，实现表单数据的序列化
2. 异步上传⼆进制⽂件
⼆、创建formData对象
<!-- 创建普通的html表单 -->
<form id="form">
<input type="text"name="username">
<input type="password"name="password">
<!-- type 设置为button，不会触发form 提交 -->
<input type="button"id="btn"value="提交">
</form>
<script type="text/javascript">
// 获取按钮
var btn = ElementById('btn');
transformer是什么意思中文翻译// 获取表单必须为原⽣的dom元素
var form = ElementById('form');
// 为按钮添加点击事件
// 将普通的html表单转换为表单对象
var formData =new FormData(form);
// 创建ajax对象
var xhr =new XMLHttpRequest();
/
/ 对ajax对象进⾏配置
xhr.open('post','localhost:3000/formData');
// 发送ajax请求
xhr.send(formData);
// 监听xhr对象下⾯的onload事件
// 对象http状态码进⾏判断
if(xhr.status ==200){
console.sponseText);
}
}
}
</script>
jquery下载文件请求三、formData对象操作⽅法
1. get(‘key’) 获取表单对象属性的值
字符串加密2. set(‘key’, ‘value’) 设置表单对象属性的值
3. delete(‘key’) 删除表单对象属性中的值
4. append(key,value)在数据末尾追加数据
5. getAll(‘user’)获取取key为user的所有值 [‘a’,‘b’]
<!-- 创建普通的html表单 -->
<form id="form">
<input type="text"name="username">
<input type="password"name="password">
<input type="button"id="btn"value="提交">
</form>
<script type="text/javascript">
// 获取按钮
var btn = ElementById('btn');
// 获取表单
var form = ElementById('form');
// 为按钮添加点击事件
// 将普通的html表单转换为表单对象短暂的transient
var formData =new FormData(form);
//获取username的value值
<('username');
//设置username的value值为tom
formData.set('username','tom');
console.('username'))// tom
//删除
formData.delete('password');
console.('password'))// null
//在数据末尾追加
formData.append('sex','⼥');
console.('sex'));//‘⼥’
// set('sex','⼥') 有则修改，没有则添加
js如何实现点击切换图片//append('sex','⼥') 不管是否存在，都会末尾追加
formData.append('sex','男');
//获取所有属性值
console.All('sex'))//  ['⼥','男']
</script>
四、jquery中Ajax如何请求
$.ajax({
url:'/api/reg',
type:'post',
processData:false,
contentType:false,
catch:false,
data:formData,
success:function(res){
console.log(res);
}
})
Ajax上传⽂件的cache、processdata、contentType属性以及FormData对象的总结
前⾔：在之前的Ajax⼀次性上传多张图⽚并实现预览的博客中提到，如果要⽤ Ajax 上传⽂件，则需要使⽤ FormData 对象来作为数据，⽽不能使⽤ form 的 serialize ⽅法（原因是 serialize ⽅法得到的数据是⼀个字符串，其不⽀持⼆进制数据传输，因此⽆法上传⽂件）1. FormData对象
var formdata = new FormData();//创建⼀个新的FormData对象
//Ajax中的 data 属性就是 formdata
formdata.append(‘name’,‘value’); //使⽤append的⽅法为 formdata 对象赋值
2. Ajax属性：cache、processData、contentType
① cache：缓存
当发起⼀次请求后，会把获得的结果以缓存的形式进⾏存储，当再次发起请求时，如果 cache 的值是 true ，那么会直接从缓存中读取，⽽不是再次发起⼀个请求了。
从 cache 的⼯作原理可以得出，cache 的作⽤⼀般只在 get 请求中使⽤。
② processData：处理数据
默认情况下，processData 的值是 true，其代表以对象的形式上传的数据都会被转换为字符串的形式上传。⽽当上传⽂件的时候，则不需要把其转换为字符串，因此要改成false
③ contentType：发送数据的格式
和 contentType 有个类似的属性是 dataType ， 代表的是期望从后端收到的数据的格式，⼀般会有 json 、text……等
⽽ contentType 则是与 dataType 相对应的，其代表的是 前端发送数据的格式
默认值：application/x-www-form-urlencoded
代表的是 ajax 的 data 是以字符串的形式 如 id=2019&password=123456
使⽤这种传数据的格式，⽆法传输复杂的数据，⽐如多维数组、⽂件等
有时候要注意，⾃⼰所传输的数据格式和ajax的contentType格式是否⼀致，如果不⼀致就要想办法对数据进⾏转换
把contentType 改成 false 就会改掉之前默认的数据格式，在上传⽂件时就不会报错了。
五、后端如何接收
Formidable是Node.js模块，⽤于解析表单数据，特别是⽂件上传。
1. 下载formitable
npm install formidable --save
2. 引⼊
var formidable =require('formidable')
3. 创建formidable表单解析对象
var form =new formidable.IncomingForm()
4. 解析request请求中表单提交的formdata数据，如果提供了回调函数callback，则收集所有字段和⽂件并将其传递给回调。
form.parse(request,[cb]);
form.parse(req,function(err, fields, files){idea不联网可以用吗
// ...err 错误  fields 表单中普通请求参数， files ⽂件参数
console.log(files);
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。