使用FormData对form表单序列化

傷城~ 2023-03-13 05:15 3阅读 0赞

## 一、FormData作用 ##

1.  将form表单元素的name与value进行组合，实现表单数据的序列化
2.  异步上传二进制文件

## 二、创建formData对象 ##

<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 = document.getElementById('btn'); // 获取表单 必须为原生的dom元素 var form = document.getElementById('form'); // 为按钮添加点击事件 btn.onclick = function () { // 将普通的html表单转换为表单对象 var formData = new FormData(form); // 创建ajax对象 var xhr = new XMLHttpRequest(); // 对ajax对象进行配置 xhr.open('post', 'http://localhost:3000/formData'); // 发送ajax请求 xhr.send(formData); // 监听xhr对象下面的onload事件 xhr.onload = function () { // 对象http状态码进行判断 if (xhr.status == 200) { console.log(xhr.responseText); } } } </script>

## 三、formData对象操作方法 ##

1.  get(‘key’) 获取表单对象属性的值
2.  set(‘key’, ‘value’) 设置表单对象属性的值
3.  delete(‘key’) 删除表单对象属性中的值
4.  append(key,value)在数据末尾追加数据
5.  getAll(‘user’)获取取key为user的所有值 \[‘a’,‘b’\]

<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 = document.getElementById('btn'); // 获取表单 var form = document.getElementById('form'); // 为按钮添加点击事件 btn.onclick = function () { // 将普通的html表单转换为表单对象 var formData = new FormData(form); //获取username的value值 formData.get('username'); //设置username的value值为tom formData.set('username','tom'); console.log(formData.get('username'))// tom //删除 formData.delete('password'); console.log(formData.get('password'))// null //在数据末尾追加 formData.append('sex','女'); console.log(formData.get('sex'));//‘女’ // set('sex','女') 有则修改，没有则添加 //append('sex','女') 不管是否存在，都会末尾追加 formData.append('sex','男'); //获取所有属性值 console.log(formData.getAll('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

1.  引入

var formidable = require('formidable')

1.  创建formidable表单解析对象

var form = new formidable.IncomingForm()

1.  解析request请求中表单提交的formdata数据，如果提供了回调函数callback，则收集所有字段和文件并将其传递给回调。

form.parse(request, [cb]);
    
    form.parse(req, function(err, fields, files) { 
      // ...err 错误 fields 表单中普通请求参数， files 文件参数
      console.log(files);
    });