Serialize () serialization _javascript techniques in jquery

This article: In jquery, when we use Ajax, we often need to assemble input data in the form of key-value pairs (Key/value) to the server, with the jquery serialize method can easily complete this work, Use this method to serialize the form to a key-value pair (key1=value1&key2=value2 ...). ) after submission. The following describes the use of serialize () in jquery

Serialize () Definition and usage:

The serialize () method creates a standard URL-encoded text string that represents a jquery object representing a collection of form elements by serializing the form value. You can select one or more form elements (such as input or text boxes), or the form element itself. The serialized value can be used in the URL query string when generating an AJAX request.

Grammar:

Copy Code code as follows:

$ (selector). Serialize ()

Detailed description

1. The. Serialize () method creates a text string represented by a standard URL encoding. Its action object is a JQuery object that represents a collection of form elements.

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

3, only "successful controls" will be serialized as strings. If you do not use a button to submit the form, the value of the Submit button is not serialized. If you want the value of the form element to be included in the sequence string, the element must use the Name property.

4, the form inside the name can not be enough Js, jquery in the keyword.

For example: length

Copy Code code 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 is not obtained on the above.

Examples of serialize () in jquery

1, Ajax serialize ()

Copy Code code as follows:

$.ajax ({
Type: "POST",
DataType: "JSON",
Url:http://www.jb51.net/article/ajaxcallback,
data:$ (' #myForm '). Serialize (),//ID to submit the form
Success:function (msg) {
Alert (msg);
}
});

2, serialize () serialization of form instances

Copy Code code 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 and then eject:

Copy Code code as follows:

Username=admin&password=admin123

Third, serialize is a simple package of Serializearray with Param method

1, $.param ()

The $.param () method is the core of the Serialize () method, which is used to serialize an array or object by Key/value.

param method of JS code

Copy Code code as follows:

Param:function (a) {
<summary>
This 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 being passed in, assume that it's 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, it ' s an object of key/value pairs
Else
Serialize the Key/values
for (Var j in a)
If The value is a 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

Copy Code code 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 is to serialize each field in a form into an array

jquery Definition of Serializearray method

Copy Code code 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

Copy Code code as follows:

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

The above is the full content of this article, I hope you can enjoy.