Web development

Encoding space characters in jQuery ajax request

I’ve run into an issue as I was working on a URL shortening tool. Obviously, this tool works with links or URLs. Some URLs can be very messy, let’s take for example Microsoft Forms or files in nested folders in SharePoint Online.

Problem

As I was passing a long URL which contained ” ” space characters I’ve noticed that the jQuery.ajax function was encoding these characters to “+” (plus) sign and not the well known “%20”.  Read 2354 articles, including this very interesting one which states that “URL is still broken to this day”. The takeaway there is that when you encode the space characters you should follow this simple rule:

You should have %20 before the ? and + after.

Even when using encodeURI() function or simply replace() function the value passed was still encoded by jQuery converting the ” ” or “%20” to “+”.

Solution

But finally I found the solution and it was something very basic so that’s why I am sharing this with you. On the official jQuery.ajax() documentation in the list of settings, there is this “processData” which is by default true.

processData (default: true)
Type: Boolean
By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type “application/x-www-form-urlencoded”. If you want to send a DOMDocument, or other non-processed data, set this option to false
Normally this is very useful because it processes the data passed but in my case it was messing up the data being sent.

Leave a Reply

Your email address will not be published. Required fields are marked *