Detailed explanation of jQuery.serialize() function instance usage

The

serialize() function is used to serialize a set of form elements and encode the form content into a string for submission.

The serialize() function is often used to serialize form content for AJAX submission.

This function mainly splices the name and value of the valid form controls used for submission into a text string that can be directly used for form submission. The string has been processed by standard URL encoding (Character setEncoded as UTF-8).

This function will not serialize form controls that do not need to be submitted, which is consistent with regular form submission behavior. For example: form controls not within the

tag will not be submitted, form controls without nameattribute will not be submitted, form controls with disabled attributes will not be submitted, and no form controls will be selected. The form control will not be submitted.

The difference from regular form submission is that regular forms generally submit button controls with names, but the serialize() function will not serialize button controls with names. Click here for more details.

This function belongs to the jQuery object (instance).

Syntax

This function is new in jQuery 1.0.

jQueryObject.serialize( )

Return value

serialize()The return value of the function is of String type and returns the available form element after encoding The text string submitted on the form.

Example & Description

Please refer to the following initial HTML code:

<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>

Serializing the element can directly serialize all form elements inside it .

// 序列化<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提交成功!" );       
    } );
        
} );

The above is the detailed content of Detailed explanation of jQuery.serialize() function instance usage. For more information, please follow other related articles on the PHP Chinese website!