serialize() 方法通過序列化表單值，創建 URL 編碼文本字符串。可以選擇一個或多個表單元素（比如 input 及/或文本框），或者 form 元素本身。序列化的值可在生成 AJAX 請求時用於 URL 查詢字符串中。舉例：使用ajax時，常常需要拼裝input數據爲'name=xiaoming&sex=1'這種形式，用JQuery的serialize方法可以輕鬆的完成這個工作。
serializeArray（）序列化表單元素 (類似 '.serialize()' 方法) 返回 JSON 數據結構數據。 此方法返回的是JSON對象而非JSON字符串。需要使用插件或者第三方庫進行字符串化操作。
使用serializeArray( ) 配合 $.toJSON 方法, 我們可以很方便的獲取表單對象的JSON, 並且轉換爲JSON字符串
客戶端代碼：
[html] view plaincopyprint?
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JquerySerialize.aspx.cs"
Inherits="JqueryAjaxTest.JquerySerialize" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Jquery Ajax Test</title>
<%--引入Jquery庫--%>
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<%--引入用於處理Json的插件--%>
<script src="Scripts/jquery.json-2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#submit").click(function () {
//序列表單內容爲字符串，綁定到DIV.result1
$("#result1").append("<tt>" + $("form").serialize() + "</tt>");
//系列化表單元素爲Json對象
var Jsonfields = $("select,:text, :radio,:checkbox").serializeArray();
//將Json對象綁定到Div.result2
$("#result2").append($.toJSON(Jsonfields));
//處理Json對象轉化爲字符串綁定到DIV.result3
jQuery.each(Jsonfields, function (i, field) {
$("#result3").append(field.name + ":" + field.value + " ");
});
//序列表單內容爲字符串，傳遞到服務器,返回結果綁定到Div.result4
var Jsonform = $("form").serialize();
$.ajax({
url: "Data/SubmitForm.aspx",
type: "get",
data: Jsonform,
success: function (data) {
$("#result4").html(data);
}
});
//給結果加上紅色邊框
$("#result").css("border", "1px solid red");
});
});
</script>
</head>
<body>
<form>
<div>
<select name="single">
<option selected="selected">Single1</option>
<option>Single2</option>
</select>
</div>
<div>
<input type="text" name="txt" value="txt1" /></div>
<div>
<input type="hidden" name="hid" value="hid1" /></div>
<div>
<textarea name="txtarea" rows="3" cols="40">txtarea</textarea>
</div>
<div>
<input type="checkbox" name="check" value="check1" checked="checked" />
check1
<input type="checkbox" name="check" value="check2" />
check2</div>
<div>
<input type="radio" name="radio" value="radio1" checked="checked" />
radio1
<input type="radio" name="radio" value="radio2" />
radio2</div>
<div>
<input type="button" id="submit" name="sub" value="顯示結果" />
</div>
</from>
<div id="result">
<div id="result1">
serialize表單的結果爲:
</div>
<div id="result2">
serializeArray返回Json對象：
</div>
<div id="result3">
serializeArray返回Json對象經過處理得到的字符串：
</div>
<div id="result4">
</div>
</div>
</body>
</html>
服務端代碼：
[csharp] view plaincopyprint?
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace JqueryAjaxTest
{
public partial class SubmitForm : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string single=HttpContext.Current.Request["single"];
string txt=HttpContext.Current.Request["txt"];
string hid=HttpContext.Current.Request["hid"];
string txtarea=HttpContext.Current.Request["txtarea"];
string check=HttpContext.Current.Request["check"];
string radio=HttpContext.Current.Request["radio"];
Response.Clear();
Response.Write("服務器接收到的表單鍵值對爲：</br>" + "single/" + single + "," + "txt/" +
txt + "," + "hid/" + hid + "," + "txtarea/" + txtarea + "," + "check/" + check + "," + "radio/" + radio);
Response.End();
}
}
}
注意：標籤名字不能使用js關鍵字，否則很可能出現衝突，導致返回數據爲空。