jquery form表单序列化

1、serialize()

做用

serialize() 方法经过序列化表单值，建立 URL 编码文本字符串。

语法

$(selector).serialize();

好比

$("button").click(function(){
  $("div").text($("form").serialize());
});

2、注意点

不能序列化file文件类型的input，只适用于一些经常使用的类型例如text、checkbox、select、date等。

3、FormData 对象

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

var formdata = new FormData($('#form')[0]);

须要注意的是FormData是JavaScript对象，而$是jQuery对象。因此须要进行转化。

jQuery对象转成DOM对象：

一、jQuery对象是一个数据对象，能够经过[index]方法得到相应的DOM对象。

var $form=$('#form'); //获得jQuery对象
var form=$("form")[0]; //转换成DOM对象

二、jQuery也能够经过.get(index)方法获得相应的DOM对象

var $form=$('#form'); //获得jQuery对象
var form=$form.get(0); //获得DOM对象

 DOM对象转成jQuery对象：

只须要用$()将DOM对象包装起来，就能得到jQuery对象了

var form=document.getElementById("form"); //获得DOM对象
var $v=$(form); //转成jQuery对象

4、参数

$.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
    }
});

 

（over）