Ajax Helper FunctionsS2C Home « Ajax Helper Functions

• <<    Ajax Shorthand Methods
• Ajax Global Event Handlers     >>

In this lesson we investigate the methods that make up the jQuery Ajax Helper Functions 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 Helper Functions Methods

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

The jQuery.param() Method 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;
  });
;});

The .serialize() Method 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;
  });
;});

The .serializeArray() Method 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;
  });
;});

Lesson 10 Complete

In this lesson we looked at the Ajax Helper Functions 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.

• <<    Ajax Shorthand Methods
• Ajax Global Event Handlers     >>