jQuery's $.ajax URL Encoding Problems

Question

I'm using jQuery's $.ajax method to send and retrieve data to a REST service. Some of the URL's I'm providing to the $.ajax method requires spaces and other special characters to be encoded.

The problem lies with Chrome, Safari (Webkit) and Internet Explorer browsers. Firefox POST's to a URL which is encoded but the other browsers POST to a URL which isn't encoded.

As an example:

$.ajax ({
  url: "http://localhost:8080/rest/123/Product Line A/[Product Type B]",
  type: "POST",
  dataType: "json",
  data: { ... },
  success: function(...){},
  error: function(...){}
})

Firefox POSTS the URL in the following format:

http://localhost:8080/rest/123/Product%20Line%20A/%5BProduct%20Type%20B%5D

Chrome, Safari and IE POSTS the URL in the following format:

http://localhost:8080/rest/123/Product Line A/[Product Type B]

The REST services accepts the encoded (Firefox) format - is there a way I can make this consistent across all browsers?

Thanks in advance!

score 23 · Accepted Answer · edited Mar 27 '16 at 08:20

23

You can use javascript's encodeURI() function to encode a URL into "Firefox format" as you state.

edited Mar 27 '16 at 08:20

Ikhlak S.

8,578
10
57
77

answered Dec 19 '10 at 23:50

Aatch

1,846
10
19

score 7 · Answer 2 · answered Dec 19 '10 at 23:49

7

Passing [Product Type B] in unencoded form is invalid, so what the browsers make of it is undefined.

Do a encodeURIComponent() on the product type part.

answered Dec 19 '10 at 23:49

Pekka

442,112
142
972
1,088

Is "Product Line B" also invalid? I'll give this a go the only problem it occurs and deeper and deeper levels just have to be careful I guess. – Dec 19 '10 at 23:57
1

@schone yup, it is too. `encodeURI()` is more convenient because it allows you to run through the entire URL at once – Pekka Dec 20 '10 at 00:00
`encodeURIComponent()` encodes `/` into `%2F`, which gives me the error `Uncaught SyntaxError: Unexpected token C` when used in the $.ajax url. – David Torres Oct 15 '14 at 15:19

mahatmanich · Answer 3 · 2010-12-19T23:57:46.547

3

I think .serialize() would be the jquery way to do this.

check here: http://api.jquery.com/serialize/

also there is a plugin for jquery: http://plugins.jquery.com/project/URLEncode

or the javascript way ... encodeURIComponent()

check here: http://www.w3schools.com/jsref/jsref_encodeURI.asp

edited Dec 19 '10 at 23:57

answered Dec 19 '10 at 23:51

mahatmanich

10,791
5
63
82

When I tried encodeURIComponent() it seemed to encode the slashes as well which breaks the URL. – Dec 19 '10 at 23:59
@schone pass each component to `encodeURIComponent()` separately, then join them together with the slashes. This is intentional and correct so that you can have a slash in the component and it will be encoded accordingly. – dsh Aug 01 '12 at 14:27
@ShivanRaptor there is Trusting and trusting, w3schools is good for the basics, sometimes much better than some unqualified comment on an answer on stackoverflow, see above. – mahatmanich Jan 15 '14 at 12:00

score 1 · Answer 4 · answered Dec 19 '10 at 23:50

1

The quick fix would be to encodeURI() the URL before passing to $.ajax. You could also replace the $.ajax function with a thin wrapper to take the {} literal and encodeURI the URL before passing to the original function.

answered Dec 19 '10 at 23:50

Alex Wright

1,751
1
12
13

jQuery's $.ajax URL Encoding Problems

4 Answers4

Linked