Question

I have the object

    var dataformdata={"key1":"value1","key2":"value2"};

then I add some more values with the same key(key3) like this

    dataformdata.key3 = [];
    dataformdata.key3.push("value3");
    dataformdata.key3.push("value4");

I do the above in an each slope. It all works except when sending the dataformdata object via the jQuery ajax function in the browser console I see that there are brackets in the key …

$.ajax({
type: "POST",
url: "/",
data: dataformdata,…

This is what I see in the browser console:

key1:value1
key2:value2
key3%5B%5D:value3
key3%5B%5D:value4

It should work because in the jQuery.ajax() docs it says

Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting

But why are the brackets (%5B%5D) in the key?

Answer 1

This notation with the brackets in the key was introduced in jQuery 1.4 to deal with multi-dimensional arrays, or arrays containing objects (or other arrays) themselves. This helps the deserializer to differentiate between an array and a primitive value. For example, if you didn’t have the brackets in the key, those two variables would be serialized the same way:

var v1 = { "k1":"v1", "k2":"v2", "k3":["v3"] };

and

var v1 = { "k1":"v1", "k2":"v2", "k3":"v3" };

With the bracket notation, they’re encoded as

k1=v2&k2=v2&k3[]=v3

and

k1=v2&k2=v2&k3=v3

respectively.