jQuery Ajax Parameter Serialization

Thursday, July 19, 2012

JQuery Ajax provides a set of very useful methods that can be used to help you serialize parameters so you can easily pass them to the back-end webserver when sending data for a custom result set. For example, if you wanted to update information on the page based on what category a user picks by clicking on a link, you can pass that category information through an Ajax method, and provide the results in the target element. In this article, we will cover the more common param() method.


Example

We will use the following HTML for the examples listed below. In this article, we will look at the param() method in detail.


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  // ... jQuery Code ...
});
</script>
</head>
<body>
 <img id="img1" src="go.png" /> ; 
 <div id="div1"> <!-- Some Content --> </div>
</body>
</html>


param() Method

The jQuery Ajax param() method creates a serialized representation of an array or an object. The serialized values can be used in the URL query string when making an Ajax request. This is a common method used to send information to the back-end webserver so that you will receive data back based on the information sent.


Syntax

$.param(object, traditional)


ParameterDescription
objectSpecifies the object or array to be serialized
traditionalOptional boolean value indicating whether or not to use the traditional style of serialization


  obj=new Object();
  obj.firstname="John";
  obj.lastname="Smith";
  obj.title="Sales Manager";
  $("#img1").click(function(){
    $("#div1").text($.param(obj));
  });


click here


Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

Professional jQuery JavaScript and jQuery: The Missing Manual HTML CSS and JavaScript Editor