jquery form表单序列化

一、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($('#form')[0]);

需要注意的是FormData是JavaScript对象，而$是jQuery对象。所以需要进行转化。

jQuery对象转成DOM对象：

1、jQuery对象是一个数据对象，可以通过[index]方法获得相应的DOM对象。

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

2、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对象

四、参数

$.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）

转载于:https://www.cnblogs.com/note-book/p/9750254.html