form表单序列化

form表单序列化

$ (“form”).serialize()和 new FormData($(’#uploadForm’)[0])都是序列化表单，实现表单的异步提交，但是二者有区别
首先，前者，只能序列化表单中的数据 ，比如文本框等input select等的数据，但是对于文件，比如文件上传，无法实现，那么这时候，FormData就上场了，

注意点
如果name值相同的表单提交，该name值会出现多次，且对应不同表单的值
表单元素没有name属性、含有disabled属性都会被禁止提交

serialize()

作用
serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。
语法
$(selector).serialize();
比如
$(“button”).click(function(){
$("div").text($(“form”).serialize());
});
注意点
不能序列化file文件类型的input，只适用于一些常用的类型例如text、checkbox、select、date等。

FormData 对象

FormData的封装方式，可以将form表单中的内容封装成formdata的数据格式 ，file文件类型的数据同样可以封装。

var formdata = new FormData(KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲form')[0]); 需要注…是jQuery对象。所以需要进行转化。

参数

$.ajax的contentType默认数据格式是name=value,每组之间用 & 联接。
processData是Boolean类型的参数，默认为true。和contentType配合使用。
但是form表单用FormData封装之后就不在是contentType的默认数据格式了，所以要设置参数
contentType: false
processData: false
也有说以formdata的方式提交时需要添加async: false, 同步，否则后台无法接收到前台传过来的file文件数据。不过我在实际项目中没有添加async: false也完全正确，没有任何报错。
最后结果：

var formdata = new FormData($('#form')[0]);
$.ajax({
    url : "url",
    type : "post/get",
    data : formdata,
    contentType : false,
    processData : false,
    success : function(data){
        // do something
    }
});

操作方法

formData里面存储的数据是以健值对的形式存在的，key是唯一的，一个key可能对应多个value。
如果是使用表单初始化，每一个表单字段对应一条数据，它们的HTML name属性即为key值，它们value属性对应value值。

1. 获取值
   通过get(key)/getAll(key)来获取对应的value

formData.get("name"); // 获取key为name的第一个值
formData.get("name"); // 返回一个数组，获取key为name的所有值

2. 添加数据
   通过append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾

formData.append("k1", "v1");
formData.append("k1", "v2");
formData.append("k1", "v3");

获取值时方式及结果如下

formData.get("k1"); // "v1"
formData.getAll("k1"); // ["v1","v2","v3"]

3. 设置修改数据
   set(key, value)来设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值

formData.append("k1", "v1");
formData.set("k1", "1");
formData.getAll("k1"); // ["1"]

4. 判断是否存在对应数据
   has(key)来判断是否对应的key值

formData.append("k1", "v1");
formData.append("k2",null);

formData.has("k1"); // true
formData.has("k2"); // true
formData.has("k3"); // false

5. 删除数据
   delete(key)删除数据

formData.getAll("k1"); // []