jQuery API

jQuery.param()

jQuery.param( obj ) Returns: String

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

  • version added: 1.2jQuery.param( obj )

    objAn array or object to serialize.

  • version added: 1.4jQuery.param( obj, traditional )

    objAn array or object to serialize.

    traditionalA Boolean indicating whether to perform a traditional "shallow" serialization.

This function is used internally to convert form element values into a serialized string representation (See .serialize() for more information).

As of jQuery 1.3, the return value of a function is used instead of the function as a String.

As of jQuery 1.4, the $.param() method serializes deep objects recursively to accommodate modern scripting languages and frameworks such as PHP and Ruby on Rails. You can disable this functionality globally by setting jQuery.ajaxSettings.traditional = true;.

Note: Because some frameworks have limited ability to parse serialized arrays, we should exercise caution when passing an obj argument that contains objects or arrays nested within another array.

In jQuery 1.4 HTML5 input elements are serialized, as well.

We can display a query string representation of an object and a URI-decoded version of the same as follows:

var myObject = {
  a: {
    one: 1, 
    two: 2, 
    three: 3
  }, 
  b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));

alert(recursiveEncoded);
alert(recursiveDecoded);

The values of recursiveEncoded and recursiveDecoded are alerted as follows:

a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

To emulate the behavior of $.param() prior to jQuery 1.4, we can set the traditional argument to true:

var myObject = {
  a: {
    one: 1, 
    two: 2, 
    three: 3
  }, 
  b: [1,2,3]
};
var shallowEncoded = $.param(myObject, true);
var shallowDecoded = decodeURIComponent(shallowEncoded);

alert(shallowEncoded);
alert(shallowDecoded);

The values of shallowEncoded and shallowDecoded are alerted as follows:

a=%5Bobject+Object%5D&b=1&b=2&b=3
a=[object+Object]&b=1&b=2&b=3

Examples:

Example: Serialize a key/value object.

<!DOCTYPE html>
<html>
<head>
  <style>div { color:red; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<div id="results"></div>
<script>

    var params = { width:1680, height:1050 };
    var str = jQuery.param(params);
    $("#results").text(str);
</script>
</body>
</html>

Demo:

Example: Serialize a few complex objects


// <=1.3.2: 
$.param({ a: [2,3,4] }) // "a=2&a=3&a=4"
// >=1.4:
$.param({ a: [2,3,4] }) // "a[]=2&a[]=3&a[]=4"

// <=1.3.2: 
$.param({ a: { b:1,c:2 }, d: [3,4,{ e:5 }] }) // "a=[object+Object]&d=3&d=4&d=[object+Object]"
// >=1.4: 
$.param({ a: { b:1,c:2 }, d: [3,4,{ e:5 }] }) // "a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5"

Comments

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for jQuery.param() below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • Seriously Annoyed
    No! STILL wrong! Here's the relevant changelog entry for jQuery 1.4.2:

    Bug Fixes:
    ยท Remove existing foo[] when traditional = false in param.

    This "bug fix" probably introduces all sorts of new and unexpected bugs that I don't even want to imagine. Here is what is correct: Default 'traditional' to 'false' and ideally rename the parameter to something else (e.g. 'serialize'). This breaking change should be OPTIONAL.

    Recommended action: Do NOT upgrade to 1.4 until this gets fixed properly.

    Repeating the comment below: "This is the sort of thing developers start doing once their software gets to a certain level of maturity. This particular change in 1.4 is a bad idea and opens a can of worms that should be left closed (catering to specific applications). At most, it should be an OPTIONAL setting that CAN be enabled, NOT a setting that can be disabled."
  • Slightly Annoyed
    I fail to see why the change here for jQuery 1.4 was even necessary when you can do:

    var myObject = {
    'a[one]' : 1,
    'a[two]' : 2,
    'a[three]' : 3,
    'b[]' : [1,2,3]
    };

    And get the same exact effect in 1.3.2 (maybe the devs didn't know that jQuery already supported it?). This change in 1.4 will break any code already doing the above (in particular, 'b' vs. 'b[]'). Stay generic jQuery.

    This is the sort of thing developers start doing once their software gets to a certain level of maturity. This particular change in 1.4 is a bad idea and opens a can of worms that should be left closed (catering to specific applications). At most, it should be an OPTIONAL setting that CAN be enabled, NOT a setting that can be disabled.
  • Andreas G.
    >> "At most, it should be an OPTIONAL setting that CAN be enabled, NOT a setting that can be disabled."

    100% agree.

    It can't find words for what the jQuery team just did. It's like a free promotional tour for php and ruby on rails.
    Just forgetting about perl/cgi.
  • Java Developer
    I second this comment. This has a good chance of breaking existing code.

    If someone has " 'a[]': {1, 2, 3} " in their existing code, it will be changed to "a[][]=1&a[][]=2&a[][]=3". Also, for ASP and JSP developers (like myself) this serves no benefit and will only cause problems.

    It is a nice feature to have for those that can use it, but the "traditional" (as it is aptly called) way should be the default behavior.
  • You know where a good place to have a discussion about this would be? On the jQuery forum. Please feel free to raise your concerns there.
  • Mike
    I totally agree with Ted. Also this has had serious consequences to our server side code, since reading a Form key in .Net now requires you add a "[]" to the end of everything that was part of an array.
  • Ted
    I agree the forum would be a good place but frankly this is such a terrible and strange design choice that I think having it surfaced right here where developers will not miss it is the right place.

    Breaking standards requires a serious justification. Ostensible compatibility with 1 language and 1 toolkit which break the web standards is not a justification. It's a severe lapse in judgment.
  • For more information on the changes in .param for jQuery 1.4, please see
    jQuery 1.4 $.param demystified

    For a .deparam counterpart to .param, please see
    jQuery BBQ: Back Button & Query Library