jQuery對象的序列化詳解


一、param() 方法創建數組或對象的序列化表示。

  該序列化值可在進行 AJAX 請求時在 URL 查詢字符串中使用。

語法:

  jQuery.param(object,traditional)
  object要進行序列化的數組或對象
  traditional規定是否使用傳統的方式淺層進行序列化(參數序列化)。

  $.ajax()設置 的 traditional參數實際上是設置 jQuery.param 的traditional 參數,默認為false,當設置為true后,會導致多層次的對象序列化為[object object](淺序列化)

<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript"> $(document).ready(function(){ personObj=new Object(); personObj.firstname="Bill"; personObj.lastname="Gates"; personObj.age=60; personObj.eyecolor="blue"; $("button").click(function(){ $("div").text($.param(personObj)); }); }); </script>
</head>
<body>
<button>序列化對象</button>
<div></div>
</body>
</html>
//輸出結果:firstname=Bill&lastname=Gates&age=60&eyecolor=blue

二、serialize() 方法通過序列化表單值,創建 URL 編碼文本字符串

  您可以選擇一個或多個表單元素(比如 input 或 文本框),或者 form 元素本身。

  序列化的值可在生成 AJAX 請求時用於 URL 查詢字符串中。

  .serialize() 方法創建以標准 URL 編碼表示的文本字符串。它的操作對象是代表表單元素集合的 jQuery 對象。

  .serialize() 方法可以操作已選取個別表單元素的 jQuery 對象,比如 <input>, <textarea> 以及 <select>。不過,選擇 <form> 標簽本身進行序列化一般更容易些。

  注意:1、只會將“成功的控件”序列化為字符串。(即不能被禁用

         2、如果不使用按鈕來提交表單,則不對提交按鈕的值序列化

     3、如果要表單元素的值包含到序列字符串中,元素必須使用 name 屬性

<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").text($("form").serialize()); }); }); </script>
</head>
<body>
<form action=""> First name: <input type="text" name="FirstName" value="Bill" /><br /> Last name: <input type="text" name="LastName" value="Gates" /><br />
</form>

<button>序列化表單值</button>
<div></div>
</body>
</html>

三、serializeArray() 方法通過序列化表單值來創建對象數組(名稱和值)

  您可以選擇一個或多個表單元素(比如 input 或 textarea),或者 form 元素本身。

  語法:$(selector).serializeArray()

詳細說明:

  serializeArray() 方法序列化表單元素(類似 .serialize() 方法),返回 JSON 數據結構數據。

  注意:此方法返回的是 JSON 對象而非 JSON 字符串。需要使用插件或者第三方庫進行字符串化操作。

  返回的 JSON 對象是由一個對象數組組成的,其中每個對象包含一個或兩個名值對 —— name 參數和 value 參數(如果 value 不為空的話)。舉例來說:

[ {name: 'firstname', value: 'Hello'}, {name: 'lastname', value: 'World'}, {name: 'alias'}, // 值為空
]

  .serializeArray() 方法使用了 W3C 關於 successful controls(有效控件) 的標准來檢測哪些元素應當包括在內。特別說明:元素不能被禁用(禁用的元素不會被包括在內),並且元素應當有含有 name 屬性。提交按鈕的值也不會被序列化。文件選擇元素的數據也不會被序列化。

  該方法可以對已選擇單獨表單元素的對象進行操作,比如 <input>, <textarea>, 和 <select>。不過,更方便的方法是,直接選擇 <form> 標簽自身來進行序列化操作。

$("form").submit(function() { console.log($(this).serializeArray()); return false; }); //上面的代碼產生下面的數據結構(假設瀏覽器支持 console.log):
[ { name: a value: 1 }, { name: b value: 2 }, { name: c value: 3 }, { name: d value: 4 }, { name: e value: 5 } ]

總結:

1、param(),數組或對象序列化表示

2、serialize(),序列化表單(成功元素、必須有name屬性)

3、serializeArray(),序列化表單來創建對象數組,返回JSON對象


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM