Example Analysis of serialize () usage in JQuery

Example Analysis of serialize () usage in JQuery

This article mainly introduces the usage of serialize () in JQuery. The example analyzes the functions, definitions, and related usage skills of the serialize () method. For more information, see

 

 

This example describes how to use serialize () in JQuery. Share it with you for your reference. The specific analysis is as follows:

I. serialize () Definition and usage:

The serialize () method creates a standard URL-encoded text string by serializing the form value. Its operation object is a jQuery object representing the form Element Set. You can select one or more form elements (such as input or text box) or form elements. Serialized values can be used in URL query strings when an AJAX request is generated.

Syntax:

$ (Selector). serialize ()

Detailed description

1. The serialize () method creates a text string encoded with a standard URL. Its operation object is a jQuery object that represents the form Element Set.

2. The serialize () method can operate jQuery objects that have selected individual form elements, such as <input>, <textarea>, and <select>. However, it is easier to select the <form> label itself for serialization.

3. Only "successful controls" are serialized as strings. If the button is not used to submit a form, the value of the submit button is not serialized. To include the value of a form element in a sequence string, the element must use the name attribute.

4. The name in form cannot use keywords in Js or jquery.
Example: length

The Code is as follows:

<Form id = "form1">
<Input name = "length" type = "text" value = "pipi"/>
<Input name = "blog" type = "text" value = "blue submarine"/>
</Form>

 

// Use: $ ("# form1"). serialize ();

 

The value cannot be obtained.

Ii. serialize () instance in JQuery

1. ajax serialize ()

The Code is as follows:

$. Ajax ({
Type: "POST ",
DataType: "json ",
Url: ajaxCallBack,
Data: $ ('# myForm'). serialize (), // ID of the form to be submitted
Success: function (msg ){
Alert (msg );
}
});

 

2. serialize () serialized form instance

The Code is as follows:

<Script src = "jquery-1.7.min. Js "> </script>
<Script>
$ (Function (){
$ ("# Submit"). click (function (){
Alert ($ ("# myForm"). serialize ());
});
});
</Script>
<Form id = "myForm">
Nickname <input type = "text" name = "username" value = "admin"/> <br/>
Password <input type = "password" name = "password" value = "admin123"/> <br/>
<Input type = "button" id = "submit" value = "serialized form"/>
</Form>

 

Click the button to bring up:

Username = admin & password = admin123

Iii. serialize is a simple package for serializeArray using the param Method

1. $. param ()

$. Param () is the core of the serialize () method. It is used to serialize an array or object according to key/value.

Js Code of the param Method

The Code is as follows:

Param: function (){
/// <Summary>
/// This method is internal. Use serialize () instead.
/// </Summary>
/// <Param name = "a" type = "Map"> A map of key/value pairs to serialize into a string. </param>'
/// <Returns type = "String"/>
/// <Private/>

 

Var s = [];

Function add (key, value ){
S [s. length] = encodeURIComponent (key) + '=' + encodeURIComponent (value );
};

// If an array was passed in, assume that it is an array
// Of form elements
If (jQuery. isArray (a) | a. jquery)
// Serialize the form elements
JQuery. each (a, function (){
Add (this. name, this. value );
});

// Otherwise, assume that it's an object of key/value pairs
Else
// Serialize the key/values
For (var j in)
// If the value is an array then the key names need to be repeated
If (jQuery. isArray (a [j])
JQuery. each (a [j], function (){
Add (j, this );
});
Else
Add (j, jQuery. isFunction (a [j])? A [j] (): a [j]);

// Return the resulting serialization
Return s. join ("&"). replace (/% 20/g, "+ ");
}

 

For example:

The Code is as follows:

Var obj = {a: 1, B: 2, c: 3 };
Var k = $. param (obj );
Alert (k); // output a = 1 & B = 2 & c = 3

2. serializeArray

The serializeArray method serializes fields in a form into an array.
Jquery definition of serializeArray Method

The Code is as follows:

SerializeArray: function (){
/// <Summary>
/// Serializes all forms and form elements but returns a JSON data structure.
/// </Summary>
/// <Returns type = "String"> a json data structure representing the serialized items. </returns>

 

Return this. map (function (){
Return this. elements? JQuery. makeArray (this. elements): this;
})
. Filter (function (){
Return this. name &&! This. disabled &&
(This. checked |/select | textarea/I. test (this. nodeName) |
/Text | hidden | password | search/I. test (this. type ));
})
. Map (function (I, elem ){
Var val = jQuery (this). val ();
Return val = null? Null:
JQuery. isArray (val )?
JQuery. map (val, function (val, I ){
Return {name: elem. name, value: val };
}):
{Name: elem. name, value: val };
}). Get ();
}

 

SerializeArray data example:

The Code is as follows:

[{
Name: username,
Value: China
},{
Name: password,
Value: xxx
}]