722
jquery序列化表單 - serialize()/serializeArray()/param()區別
serialize()
在jQuery中，當我們使用ajax時，常常需要拚裝input數據以鍵值對（Key/Value）的形式發送到服務器，用JQuery的serialize方法可以輕鬆的完成這個工作，使用這個方法可以將表單序列化為鍵值對（key1=value1&key2=value2…）後提交。下麵介紹JQuery中serialize()的用法
定義
serialize()方法通過序列化表單值，創建URL編碼文本字符串，可以選擇一個或多個表單元素（比如 input 及/或 文本框），或直接選擇form本身，將其序列化後用於ajax請求，如：username=xxx&password=yyy
注釋：隻會將”成功的控件“序列化為字符串。如果不使用按鈕來提交表單，則不對提交按鈕的值序列化。如果要表單元素的值包含到序列字符串中，元素必須使用 name 屬性
格式
var data = $('form').serialize();
功能
將表單內容序列化成一個字符串
返回結果
username=forrest&passwd=1234&gender=0&interest=swimming&interest=running&interest=readBook
優點
1.在ajax提交表單數據時，就不用一一列舉出每一個參數。隻需將data參數設置為$("form").serialize()
2.用字符串方式時，需要注意對字符編碼（中文問題），如果不希望編碼帶來麻煩，可以使用serialize()方法，它會自動編碼
實例
<form action="">
First name: <input type="text" name="FirstName" value="Bill" /><br />
Last name: <input type="text" name="LastName" value="Gates" /><br />
</form>
<script>
$(document).ready(function(){
console.log($("form").serialize()); // FirstName=Bill&LastName=Gates
});
</script>
這樣，我們就可以把序列化的值傳給ajax()作為url的參數，輕鬆使用ajax()提交form表單了，而不需要一個一個獲取表單中的值然後傳給ajax()
$.ajax({
type: 'post',
url: 'your url',
data: $("form").serialize(),
success: function(data) {
// your code
},
error: function(error){alert(error);
});
使用$.post()、$.get()和$.getJSON()也是一樣的
$.post('your url', $("form").serialize(), function(data) {
// your code
}
});
$.get('your url', $("form").serialize(), function(data) {
// your code
}
});
$.getJSON('your url', $("form").serialize(), function(data) {
// your code
}
});
serializeArray()方法
JQuery中serializeArray方法是序列化表單元素(類似'.serialize()'方法)返回JSON數據結構數據
serializeArray()序列化表單元素為JSON數據
格式
var jsonData = $("form").serializeArray();
功能
將頁麵表單序列化成一個JSON結構的對象。注意不是JSON字符串
返回結果：
[{"name":"lihui", "age":"20"},{...}] 獲取數據為 jsonData[0].name
實例
var fields = $("select, :radio").serializeArray();
jQuery.each( fields, function(i, field){
$("#results").append(field.name + "=" +field.value + "; ");
});//username=forrest; passwd=1234; gender=0; interest=swimming; interest=running; interest=readBook;
在使用ajax提交表單數據時,以上兩種方法都可以將data參數設置為$(form).serialize()或$(form).serializeArray()
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
function t(){
var str1 = $("form").serialize();
var str2 = $("form").serializeArray();
alert("serialize="+str1+" serializeArray="+str2);
}
</script>
</head>
<body>
<form>
<input type="text" name="username" />
<input type="text" name="age" >
<input type="password" name="password" />
<input type="button" >
</form>
</body>
</html>
param()方法
$.param()方法是serialize()方法的核心，用來對一個數組或對象按照key/value進行序列化
比如將一個普通的對象序列化：
var obj = {a:1,b:2,c:3};
var k = $.param(obj);
alert(k); //輸出a=1&b=2&c=3
最後更新：2017-05-23 15:02:25