Serialize () serialization in jquery

more 2014/8/24 sources: jquery learning PageView: 1671 Learning Tags:SerializeIn jquery, when we use Ajax, we often need to assemble input data to the server in the form of key-value pairs (key/value), which can be done easily with the Serialize method of jquery. 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

First, serialize () Definition and usage:

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

Grammar:

$ (selector). Serialize ()

Detailed Description

1. The. Serialize () method creates a text string that is represented as a standard URL encoding. Its operand 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 the <form> tag itself for serialization

3. Only "Successful control" is serialized as a string. If you do not use a button to submit the form, the value of the Submit button is not serialized. If the value of the form element is to be included in the sequence string, the element must use the Name property.

4, the form inside the name can not suffice Js, jquery keyword.

Example: Length

 HTML Code replication

<form id= "Form1" >   <input name= "Length" type= "text" value= "Pipi"/>   <input name= "blog" type= " Text "value=" Blue Submarine "/></form>//used: $ (" #form1 "). Serialize ();

The above does not get the value.

Ii. examples of serialize () in jquery

1. Ajax Serialize ()

 JScript Code replication

$.ajax ({    type: "POST",    dataType: "JSON",    Url:ajaxcallback,    data:$ (' #myForm '). Serialize (),// The ID of the form to be submitted    success:function (msg){        alert (msg);    }}); 

2. Serialize () serialization of form instances

HTML CodeCopy

<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 pop up:

Username=admin&password=admin123

Thirdly, serialize is a simple packing for Serializearray with Param method.

1, $.param ()

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

JS code for the Param method

JScript CodeCopy

Param:function (a){//<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 were passed in, assume that it's an array//of form elements if (Jquery.isarray (a) | | a.jqu ery)//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 a)//if the value was an array then the key names need to be repeated If (j                    Query.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

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

The jquery definition of the Serializearray method

JScript CodeCopy

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.ch ecked | |                    /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:el Em.name, value:val}; }). get (); }

Serializearray Data Examples

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

Serialize () serialization in jquery