How do I send an array using jQuery and the .ajax method without escaping the brackets?

Question

I am trying to send the same parameter name with multiple values, but even after reading the posts on SO can't figure out how to do it... I want to have an array of destination_input:

var myObject = {
                  search_zip: params.search_zip,
                  search_distance: params.search_distance,
                  filter_opts: params.filter_opts,
                  page: params.page,
                  destination_input: ['323 w concord pl #8, chicago, il', '11 e hubbard, chicago, il']
            };

but this creates a query string of:

search_zip=60614&search_distance=1&filter_opts=discount_check%2Cneed_device_check%2Cauto_track_check&destination_input%5B%5D=323+w+concord+pl+%238%2C+chicago%2C+il&destination_input%5B%5D=11+e+hubbard%2C+chicago%2C+il

As you can see it keeps adding %5B%5D to the destination_input such as &destination_input%5B%5D=11+e+hubbard%2C+chicago%2C+il

This means everything gets messed up on the backend. Any ideas?

Answer 1

I'm going under the assumption that your backend is not PHP, since PHP expects [] to indicate that an GET parameter is multivalued. That means that your backend will treat multiple GET arguments with the same key as elements of an array, correct?

Going off that assumption, you just need to tell jQuery to not automatically add [] when it is turning an array into a GET argument string.

To so that, you have to pass the 'traditional': true argument as an option to jQuery's ajax function.

Search 'traditional' on here: http://api.jquery.com/jQuery.ajax/