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）