我們使用ajax給後臺傳遞資料的時候，經常要獲取表單的資料。表單資料不多還好說，但是如果表單欄位非常多，那麼無疑是非常頭疼的事。如何獲取大量的表單資料，是非常重要的事情。

表單頁面

	<form action="">
		<input type="text" name="username1">
		<input type="text" name="address1">
		<input type="text" name="age1">

		<input type="text" name="username2">
		<input
 
 type="text" name="address2">
		<input type="text" name="age2">
	</form>
	
	<button class="btn1">普通方法</button>
	<button class="btn2">serialize</button>
	<button class="btn3">serializeArray</button>

這裡只獲取表單資料，暫不做提交。

普通方法   在瞭解序列化方法之前，我的做法是寫一個js函式，把所有的input遍歷一遍，組成一個物件通過ajax傳遞後臺。

	$(".btn1").click(function(){
		var inputs = $("input");
		var data={};
		for(var i=0;i<inputs.length;i++){
			var name =inputs.eq(i).attr("name");
			var value=inputs.eq(i).val();
			data[name]=value;
		}
		console.log(data);	
	})

返回結果

{username1: "a", address1: "b", age1: "c", username2: "d", address2:
 
 "e", …}

  這樣做似乎也可以達到目的，但是如果表單中存在select、checkbox等型別表單欄位，那麼似乎又要多寫一些程式碼來獲取了。

serialize方法   serialize方法可以將表單序列化成一個拼接的字串形式。

	$(".btn2").click(function(){
		var data = $("form").serialize();
		console.log(data);
	})

返回結果

	username1=a&address1=b&age1=c&username2=d&address2=e&age2=f

  單純表單提交，足夠使用

serializeArray方法   serialize方法可以將表單序列化成一個特殊的json陣列,帶有name和value的json。

	$(".btn3").click(function(){
		var data = $("form").serializeArray()
		console.log(data);
	})

返回結果

	Array(6)
	0: {name: "username1", value: "a"}
	1: {name: "address1", value: "b"}
	2: {name: "age1", value: "c"}
	3: {name: "username2", value: "d"}
	4: {name: "address2", value: "e"}
	5: {name: "age2", value: "f"}

  很顯然我們需要處理一下這個陣列，才能更好的得到我們想要的資料

陣列處理

	$(".btn3").click(function(){
		var data = $("form").serializeArray()
		var newdata ={}
		data.map(function(val,key){
			newdata[val.name]=val.value;
		})
		console.log(newdata);
	})

返回結果

	{username1: "a", address1: "b", age1: "c", username2: "d", address2: "e", …}

  現在得到我們想要的資料了，可以放心去傳遞資料了，不過這還沒有結束。   這段程式碼雖然實現了我們的功能，但似乎不夠簡潔，我們還需要優化它。

程式碼優化

	$(".btn3").click(function(){
		var data ={}
		$("form").serializeArray().map(function(val,key){
			data[val.name]=val.value;
		})
		console.log(data);
	})

返回結果

	{username1: "a", address1: "b", age1: "c", username2: "d", address2: "e", …}

  資料完美獲取得到了，程式碼也進行了優化，最後就可以愉快的把資料傳遞給後臺了。