jQuery.serialize() 函數實例用法詳解

serialize()函數用於序列化一組表單元素，將表單內容編碼為用於提交的字串。

serialize()函數常用於將表單內容序列化，以便用於AJAX提交。

該函數主要根據用於提交的有效表單控制項的name和value，將它們拼接為一個可直接用於表單提交的文字字串，該字串已經過標準的URL編碼處理(字符集編碼為UTF-8)。

該函數不會序列化不需要提交的表單控件，這和常規的表單提交行為是一致的。例如：不在ff9c23ada1bcecdd1a0fb5d5a0f18437標籤內的表單控制項不會被提交、沒有name屬性的表單控制項不會被提交、帶有disabled屬性的表單控制項不會被提交、沒有被選取的表單控制項不會被提交。

與常規表單提交不一樣的是：常規表單一般會提交帶有name的按鈕控件，而serialize()函數不會序列化帶有name的按鈕控件。更多詳情請點這裡。

該函數屬於jQuery物件(實例)。

語法

jQuery 1.0 新增此函數。

jQueryObject.serialize( )

傳回值

serialize()函數的傳回值為String類型，傳回將表單元素編碼後的可用於表單提交的文字字串。

範例&說明

請參考下面這段初始HTML程式碼：

<form name="myForm" action="http://www.365mini.com" method="post">
    <input name="uid" type="hidden" value="1" />
    <input name="username" type="text" value="张三" />
    <input name="password" type="text" value="123456" />
    <select name="grade" id="grade">
        <option value="1">一年级</option>
        <option value="2">二年级</option>
        <option value="3" selected="selected">三年级</option>
        <option value="4">四年级</option>
        <option value="5">五年级</option>
        <option value="6">六年级</option>
    </select>
    <input name="sex" type="radio" checked="checked" value="1" />男
    <input name="sex" type="radio" value="0" />女
    <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
    <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
    <input name="hobby" type="checkbox" value="3" />羽毛球
    <input name="btn" id="btn" type="button" value="点击" />
</form>

對ff9c23ada1bcecdd1a0fb5d5a0f18437元素進行序列化可以直接序列化其內部的所有表單元素。

// 序列化<form>内的所有表单元素
// 序列化后的结果：uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
alert( $("form").serialize() );
我们也可以直接对部分表单元素进行序列化。
// 序列化所有的text、select、checkbox表单元素
// 序列化后的结果：username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2
alert( $(":text, select, :checkbox").serialize() );
serialize()函数通常用于将表单内容序列化，以便通过AJAX方式提交。
$("#btn").click( function(){
    // 将当前表单内容以POST请求的AJAX方式提交到"http://www.365mini.com"
    $.post( "http://www.365mini.com", $("form").serialize(), function( data, textStatus, jqXHR ){
        alert( "AJAX提交成功!" );       
    } );
        
} );

以上是jQuery.serialize() 函數實例用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！