jQuery serialize vs serializeArray Differences

jQuery provides two primary methods for extracting and encoding form elements: serialize() and serializeArray(). While both methods target successful form controls and extract their names and values, they differ fundamentally in their output format. This article explains how each method structures its output, how they handle value encoding, and when to use one over the other.

The Core Difference: Output Format

The primary distinction between the two functions lies in the data type and format returned:

  • serialize() returns a URL-encoded string. It formats the input elements into standard query string notation (key1=value1&key2=value2).
  • serializeArray() returns a JavaScript array of objects. Each object represents a single form control and contains exactly two keys: name and value.

How jQuery serialize() Works

When you run $(selector).serialize(), jQuery loops through the form controls and constructs a single string suitable for standard HTTP requests. Special characters and spaces are percent-encoded according to standard URL encoding rules (spaces become + or %20).

Example Form:

<form id="userForm">
  <input type="text" name="username" value="Jane Doe" />
  <input type="email" name="email" value="jane@example.com" />
</form>

Output:

$("#userForm").serialize();
// Result: "username=Jane+Doe&email=jane%40example.com"

How jQuery serializeArray() Works

When using $(selector).serializeArray(), jQuery creates an array where every form field is an individual object. Unlike serialize(), the values inside these objects are not URL-encoded; they remain standard JavaScript strings.

Using the same form above, the result is:

$("#userForm").serializeArray();
/* Result:
[
  { name: "username", value: "Jane Doe" },
  { name: "email", value: "jane@example.com" }
]
*/

Handling Multiple Values (Checkboxes and Selects)

Both methods handle multi-select fields and grouped checkboxes by creating multiple entries with the same name:

  • serialize(): Appends the duplicate key to the query string (e.g., tags=news&tags=tech).
  • serializeArray(): Adds multiple distinct objects with identical name properties to the array (e.g., [{ name: "tags", value: "news" }, { name: "tags", value: "tech" }]).

When to Use Each Method

Choose serialize() when:

  • Sending form data directly via standard AJAX POST or GET requests where the server expects application/x-www-form-urlencoded payloads.
  • Appending data directly to a URL query string.

Choose serializeArray() when:

  • You need to manipulate, validate, or filter form data client-side before submission.
  • You need to convert form data into a custom JSON structure or a nested object using standard JavaScript iteration (map, reduce, or forEach).
  • You are sending payloads to a REST API that requires application/json.