Ajax SerializationS2C Home « Ajax Serialization

In this lesson we investigate the methods that make up the jQuery Ajax Serialization suite.

These methods make it easy for us to encode and serialize objects, strings and form values for use in URLs and for encoding into JSON format.

Ajax Serialization Methods

The three methods which make up the jQuery Ajax Serialization suite are listed in the table below, click a link to go to examples for that method.


Ajax Serialization Description
jQuery.param()Create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request.
.serialize()Encode a set of form elements as a string ready for submission.
.serializeArray()Encode a set of form elements as an array of name/value pairs ready for encoding as a JSON string.

The jQuery.param() Methodgo to top of page Top

Create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request.

We will be using the jQuery.param( object ) signature for our example which will create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request.

The second signature jQuery.param( object, traditional ) creates a traditional 'shallow' serialized representation of an array or object, suitable for use in a URL query string or Ajax request.

Examples of both signatures are available in the reference section.

In the example below when we press the button the first time, we create a serialized representation of an object. For the example we output messages for this and also for the object decoded. The resultant string could just as easily be sent to a server as part of an Ajax request.


$(function(){
  $('#btn1').one('click', function(){
    var obj1 = {species: 'penguin', skills: {flight: 'no', swim: 'yes'}, climate: 'cold'};
    $('#div3').append($.param(obj1) + '<br />');
    $('#div3').append(decodeURIComponent($.param(obj1)) + '<br />');
    return false;
  });
;});

div3. Some initial text.



Press the button below to action the above code:



The .serialize() Methodgo to top of page Top

Encode a set of form elements as a string ready for submission.

We will be using this methods only signature .serialize() for our example which will encode a set of form elements as a string ready for submission.

In the example below when we press the 'Submit' button the we serialize the 'successful controls' from the form below into a query string. For the example we output a message but the resultant string could just as easily be sent to a server as part of an Ajax request. Change some values in the form and press the 'Submit' button to see the varying results.


$(function(){
  $('#form1').submit(function() {
    $('#div1').append($(this).serialize() + '<br />');
    return false;
  });
;});

Pie Survey

Which pie do you prefer?:

Select a pie shape: 

            


div1. Some initial text.



The .serializeArray() Methodgo to top of page Top

Encode a set of form elements as an array of name/value pairs ready for encoding as a JSON string.

We will be using this methods only signature .serializeArray() for our example which will encode a set of form elements as an array of name/value pairs ready for encoding as a JSON string.

In the example below when we press the 'Submit' button we serialize the 'successful controls' from the form below into an array of name/value pairs. For the example we output a message but the resultant array could just as easily be encoded into a JSON string. Change some values in the form and press the 'Submit' button to see the varying results.


$(function(){
  $('#form2').submit(function() {
    $('#div2').append(JSON.stringify($(this).serializeArray()) + '<br />');
    return false;
  });
;});

Pie Survey

Which pie do you prefer?:

Select a pie shape: 

            


div2. Some initial text.



Lesson 10 Complete

In this lesson we looked at the Ajax Serialization Methods.

Related Tutorials

jQuery Advanced - Lesson 8: Ajax Low-Level Interface
jQuery Advanced - Lesson 9: Ajax Shorthand Methods
jQuery Advanced - Lesson 11: Ajax Global Event Handlers

What's Next?

In the next lesson we take our final look at Ajax as we investigate Ajax Global Event Handlers.

go to home page Homepage go to top of page Top