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）