JQuery中serialize()用法實例分析_jquery

本文實例講述了JQuery中serialize()用法。分享給大家供大家參考。具體分析如下：

一、serialize()定義與用法：

serialize()方法透過序列化表單值，建立標準的URL編碼文字字串，它的操作物件是代表表單元素集合的jQuery 物件。你可以選擇一個或多個表單元素（例如input或文字方塊），或是 form 元素本身。序列化的值可在產生 AJAX 請求時用於 URL 查詢字串中。
 
語法：

$(selector).serialize()
 
詳細說明

1、.serialize() 方法建立以標準 URL 編碼表示的文字字串。它的操作物件是代表表單元素集合的 jQuery 物件。

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

3、只會將」成功的控制項「序列化為字串。如果不使用按鈕來提交表單，則不對提交按鈕的值序列化。如果要表單元素的值包含到序列字串中，元素必須使用 name 屬性。
 
4.form裡面的name不能夠用 Js、jquery裡的關鍵字。
例如：length

複製程式碼 程式碼如下:

  
  

//使用:$("#form1").serialize();

上面則取得不到值。
 
二、JQuery中serialize()實例
 
1、ajax serialize()

複製程式碼 程式碼如下:

$.ajax({
    type: "POST",
    dataType: "json",
    url:ajaxCallBack,
    data:$('#myForm').serialize(),// 要提交表單的ID
    success: function(msg){
        alert(msg);
    }
});

2、serialize() 序列化表單實例

複製程式碼 程式碼如下:

<script><br /> $(function(){<br />    $("#submit").click(function(){<br />      alert($("#myForm").serialize());<br />    });<br /> });<br /> </script>

暱稱

密碼

點擊按鈕之後彈出：

username=admin&password=admin123
 
三、serialize是用param方法對serializeArray的一個簡單包裝
 
1、$.param()

$.param()方法是serialize()方法的核心，用來將一個陣列或物件依照key/value進行序列化。
 
param方法的js程式碼

複製程式碼 程式碼如下:

參數：函數（a）{
///   
///        此方法為內部方法。  請改用serialize()。
///    摘要>
///    要序列化為字串的鍵/值對映射。 '
///   
///   

var s = [ ];

函數加（鍵，值）{
    s[ s.length ] =encodeURIComponent(key) '='encodeURIComponent(value);
};

// 如果傳入的是數組，則假設它是數組
// 表單元素
if ( jQuery.isArray(a) || a.jquery )
    // 序列化表單元素
    jQuery.each( a, function(){
 加( this.name, this.value );
    });

// 否則，假設它是鍵/值對的物件
其他
    // 序列化鍵/值
    for ( var j in a )
 // 若數值是陣列則鍵名需要重複
 if ( jQuery.isArray(a[j]) )
     jQuery.each( a[j], function(){
  加（j，這個）；
     });
 其他
     add( j, jQuery.isFunction(a[j]) ? a[j]() : a[j] );

// 回傳序列化結果
return s.join("&").replace(/ /g, " ");
}

例如：

複製程式碼如下程式碼：

var obj = {a:1,b:2,c:3};
var k = $.param(obj);
警報（k）；    // 輸出a=1&b=2&c=3

 
2、序列化數組
 
SerializeArray 方法將一個表單儲存的各個欄位序列化成一個資料庫
jquery的serializeArray方法定義

複製程式碼如下程式碼：

serializeArray: function() {
///   
///        序列化所有表單和表單元素，但傳回 JSON 資料結構。
///    摘要>
///    表示序列化項目的 JSON 資料結構。

回傳 this.map(function(){
    返回 this.elements ？ jQuery.makeArray(this.elements) : this;
})
.filter(函數(){
    回 this.name && !this.disabled &&
 (this.checked || /select|textarea/i.test(this.nodeName) ||
     /text|hidden|password|search/i.test(this.type));
})
.map(函數(i, elem){
    var val = jQuery(this).val();
    返回 val == null ？空：
 jQuery.isArray(val) ?
     jQuery.map( val, function(val, i){
  return {name: elem.name, value: val};
     }) :
     {名稱：elem.name，值：val};
    }).get();
}

serializeArray資料範例：

複製程式碼程式碼如下：

[ {
 名稱：使用者名，
 值：中國
 }, {
 名稱：密碼，
 值：xxx
}]

希望本文對大家介紹的 jQuery 程式設計有所幫助。