jQuery .param() Method

What Is $.param()?

jQuery.param(obj [, traditional]) creates a serialized, URL-encoded string from an array, plain object, or jQuery form collection (since 1.2; traditional since 1.4). Use it for query strings and Ajax data.

$.param({ width: 1680, height: 1050 });
// "width=1680&height=1050"

$.param({ a: [2, 3, 4] });           // "a[]=2&a[]=3&a[]=4"  (1.4+)
$.param({ a: [2, 3, 4] }, true);     // "a=2&a=3&a=4"        (traditional)

// Used internally by $.ajax() / $.get() / $.post() when data is an object

How to Use $.param()

Pass data in, get a query string out — then append it to a URL or let Ajax helpers encode for you.

1. Build a plain object, a serializeArray()-style array, or select form inputs.
2. Call $.param(obj) for recursive encoding (default).
3. Pass true as the second argument for traditional shallow encoding.
4. Append the result after ?, or pass the object to $.get() / $.post() directly.
5. Use decodeURIComponent() when you need a readable debug view.

Pseudocode

call $.param(obj [, traditional])

if obj is a jQuery collection:
    treat as form inputs (name/value)

if obj is [{ name, value }, …]:
    encode each pair as name=value

if obj is a plain object:
    if traditional is true:
        shallow encode (nested objects → "[object Object]")
        arrays → repeated keys without []
    else:
        recursively walk nested keys
        arrays → name[]=value
        objects → name[key]=value

return joined "key=value" pairs with "&"
(URL-encode keys and values)

Cheat Sheet

Keep these facts handy while building query strings.

Live Preview

Serialize sample data and compare recursive vs traditional output.

Ready — pick an action and click Run.

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

var params = { width: 1680, height: 1050 };
var str = $.param(params);

$("#results").text(str);
// "width=1680&height=1050"

width=1680&height=1050

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

var encoded = $.param(myObject);
var decoded = decodeURIComponent(encoded);

// decoded → a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

Decoded:
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

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

$.param(myObject, true);
// decoded → a=[object Object]&b=1&b=2&b=3

$.param(myObject, false);
// decoded → a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

traditional true  → a=[object Object]&b=1&b=2&b=3
traditional false → a[one]=1&…&b[]=1&b[]=2&b[]=3

var formData = [
  { name: "first", value: "Rick" },
  { name: "last", value: "Astley" },
  { name: "job", value: "Rock Star" }
];

$.param(formData);
// "first=Rick&last=Astley&job=Rock+Star"

// Live form:
$.param($("#demo-form").serializeArray());

first=Rick&last=Astley&job=Rock+Star

var filters = { q: "jquery param", page: 2, tags: ["ajax", "tutorial"] };

var fullUrl = "/api/search?" + $.param(filters);
// /api/search?q=jquery+param&page=2&tags[]=ajax&tags[]=tutorial

// Same encoding when you pass the object:
$.get("/api/search", filters);

/api/search?q=jquery+param&page=2&tags[]=ajax&tags[]=tutorial

Performance Notes

Encoding small objects is inexpensive. Cost grows with deep trees and large arrays — keep payloads flat when you can.

Key Takeaways