Configure / Change JQuery AJAX Encoding

Question

I am making a basic PATCH call like this one:

.ajax({
    url: "/foo/bar/"
    type: "PATCH",
    dataType: 'json',
    data: {
        "foo": "foosball",
        "bar": "bars on bars"
    },
    ...
});

Jquery automatically encodes the data, which leaves "bars on bars" like "bars+on+bars". Is there a way to change the encoding so that spaces are replaces with %20 rather than pluses?

I've noticed this thread that didn't seem to lead anywhere.

I've also taken note of encodeURI and encodeURIComponent but haven't gotten either to work. Both seem to result in the string being double encoded, leaving me with bars%2520on%2520bars

summary:

What I start with: ... "bars on bars" ...

What the received data looks like after jquery encodes the request: "bars+on+bars"

What I need the received data to look like: "bars%20on%20bars"

For some reason that double encodes it and leaves me with bars%2520on%2520bars — Donato Perconti
– Donato Perconti, Commented Jun 17, 2016 at 4:43
The endpoint accepts PATCH requests. Does jquery encode differently for different http methods? — Donato Perconti
– Donato Perconti, Commented Jun 17, 2016 at 5:00
Yeah, because double encode here: space -> %20, and then %20 -> %2520. Maybe you can process data manually and set processData: false. — L_K
– L_K, Commented Jun 17, 2016 at 5:01

Liquidchrome · Accepted Answer · 2016-06-17 17:25:18Z

1

How about use a variable and pass that to data.

var d={
    "foo": "foosball",
    "bar": "bars on bars"
}
d.bar=encodeURI(d.bar);

.ajax({
url: "/foo/bar/"
type: "PATCH",
dataType: 'json',
data: d,
...
});

answered Jun 17, 2016 at 17:25

Liquidchrome

9045 silver badges10 bronze badges

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

5 Comments

Donato Perconti Over a year ago

I updated the question, but encodeURI and encodeURIComponent double encodes the data, which leaves me with bars%2520on%2520bars.

Liquidchrome Over a year ago

have you tried adding contentType: application/json ?

Donato Perconti Over a year ago

Yes, still pluses though :(

Liquidchrome Over a year ago

shooting in the dark... data: JSON.stringify({"foo": "foosball","bar": "bars on bars"})

Donato Perconti Over a year ago

Yes, I've been looking at that and I think I might just have to use that. It requires converting it from a string to a dict/json once received though.

Donato Perconti · Accepted Answer · 2016-06-18 17:21:09Z

Still wish there was a better way, but I ended up using this plugin from this website.

 jQuery.extend({
     postJSON: function(url, data, callback) {
         return jQuery.ajax({
             type: "POST",
             url: url,
             data: JSON.stringify(data),
             success: callback,
             dataType: "json",
             contentType: "application/json",
             processData: false
         });
      }
  });

This forces my api to parse the body as a string into a dict/json. Hopefully in a few years someone can come along with a better solution.

Collectives™ on Stack Overflow

Configure / Change JQuery AJAX Encoding

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related