首頁 > web前端 > js教程 > JQuery中serialize()用法實例分析_jquery

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

WBOY
發布: 2016-05-16 16:15:21
原創
1262 人瀏覽過

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

一、serialize()定義與用法:

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

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

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

2、.serialize() 方法可以操作已選取個別表單元素的 jQuery 對象,例如 ,

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 程式設計有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板