24

I'm using JQuery to make a JSON request back to the server and it seems that it's parameter serialization is hard-coded to what PHP expects instead of being generic in nature. Basically I have an object that looks like this:

{
    foo: 1,
    bar : [1, 3, 5]
}

And it serializes it to:

foo=1&bar[]=1&bar[]=3&bar[]=5

Is there anyway to make it just do?

foo=1&bar=1&bar=3&bar=5

It seems to me that jQuery shouldn't be so tied to what a handful of server side frameworks expect as a naming convention. If I wanted my param to be called bar[] I could easily name it that myself if it's what my server-side code expects.

mpeters
  • 4,737
  • 3
  • 27
  • 41

2 Answers2

31

I'm assuming you're using JQuery 1.4. You should take a look at this: http://benalman.com/news/2009/12/jquery-14-param-demystified/

The author discusses why they made JQuery behave this way, and makes some excellent points. For example, if you don't use the "square bracket syntax", you can't pass in arrays with only a single value.

He also offers a work-around:

$.ajaxSetup({ traditional: true });

This will tell JQuery to use the non-bracket method of serialization.

zombat
  • 92,731
  • 24
  • 156
  • 164
  • 5
    Well, if your server side language/framework doesn't support single element arrays from a query string that's your problem right :) Brings me back to my original point that if your server side framework needs brackets, then you should change your param names to match, not make it the default of a server agnostic front-end library. – mpeters Mar 31 '10 at 02:28
  • I guess your argument would be more compelling if the method you are advocating was in some way the "correct" one. There is apparently no RFC or standard that covers how array syntax should be handled though, and it looks like newer technologies are choosing to go with the more flexible option. You say that JQuery shouldn't be tied to a "naming convention", but it clearly supports both methods, and you could just as easily argue that the non-bracket syntax is the one doing the tying. – zombat Mar 31 '10 at 03:36
  • there's the jQuery API that states: jQuery serializes multiple values with same key i.e. {foo:["bar1", "bar2"]} becomes '&foo=bar1&foo=bar2'. notice how in the example supplied no brackets appear... – Amir Arad Apr 14 '10 at 21:56
  • 1
    @Amir - That is for JQuery 1.3. JQuery 1.4 does it with brackets, unless you set `traditional` to true, which was what I explained in my answer. See the bottom of this page for examples: http://api.jquery.com/jQuery.param/ – zombat Apr 14 '10 at 22:19
  • 1
    somewhat outdated API then, see http://api.jquery.com/jQuery.ajax/ under "data". your answer helped me alot, forgot to mention it earlier. thanks! – Amir Arad Apr 19 '10 at 12:20
21

The object can be converted to a parametrized string using $.param(obj,true). The second boolean parameter indicates the traditional method of serializing an object should be used. The traditional method does not use square brackets when it encounters the same parameter name. The serialized string returned from $.param can be passed via any ajax method.

This method is preferred over using $.ajaxSetup() as noted by the jQuery Documentation that states:

Note: The settings specified here will affect all calls to $.ajax or AJAX-based derivatives such as $.get(). This can cause undesirable behavior since other callers (for example, plugins) may be expecting the normal default settings. For that reason we strongly recommend against using this API. Instead, set the options explicitly in the call or define a simple plugin to do so.

Example:

var obj = {myProp: "test", arr: [1,2,3,4]};
var serializedObj = $.param(obj, true); //myprop=test&arr=1&arr=2&arr=3&arr=4

$.post(url,serializedObj,function(){});
Kevin Bowersox
  • 93,289
  • 19
  • 159
  • 189