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?

And how does your backend expects the query string to look like? — Darin Dimitrov
– Darin Dimitrov, Commented Jan 19, 2012 at 23:38
do you have to send it as a query string on the url? is packaging it up as JSON an option? — kinakuta
– kinakuta, Commented Jan 19, 2012 at 23:38
if you're sending a GET then of course it's escaping the brackets. Can you show us what you're using to send the request? — Sinetheta
– Sinetheta, Commented Jan 19, 2012 at 23:49

loganfsmyth · Accepted Answer · 2012-01-19 23:57:35Z

14

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/

answered Jan 19, 2012 at 23:57

loganfsmyth

162k31 gold badges349 silver badges259 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

autra Over a year ago

I'm just wondering why false is the default here. Do you know why?

loganfsmyth Over a year ago

@autra I can't say for sure, probably because jQuery came into being at a time when PHP was very popular and defaulting to the most common use-case makes sense.

Rob Over a year ago

I ran into this problem trying to pass an array of IDs to a PrimaryKeyRelatedField on a DRF serializer. The jQuery ajax request kept tacking on these brackets. Spent hours trying to figure it out. Days later, find this. TY.

Jivings · Accepted Answer · 2012-01-19 23:50:04Z

0

%5B and %5D are the URL encoded values of [ and ] respectively. They must be part of your input.

In your PHP execute urldecode(inputString) to decode the values.

answered Jan 19, 2012 at 23:50

Jivings

23.3k7 gold badges63 silver badges102 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:33:19Z

0

You're currently using an HTTP GET AJAX request to send your data. An HTTP POST instead looks to be more apt for your needs, actually.

Not only are you throwing in an object into your service, but with an object of that complexity, you may soon find yourself running out of characters if you're embedding your data on your query string.

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Jan 19, 2012 at 23:53

Richard Neil Ilagan

14.8k6 gold badges52 silver badges68 bronze badges

1 Comment

SharpC Over a year ago

I've been using a POST and I'm experiencing exactly the same problem in the encoding of the content.

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related