{"id":28,"date":"2017-10-24T13:15:20","date_gmt":"2017-10-24T13:15:20","guid":{"rendered":"http:\/\/www.iani.co\/blog\/?p=28"},"modified":"2017-10-26T09:46:26","modified_gmt":"2017-10-26T09:46:26","slug":"encoding-space-characters-in-jquery-ajax-request","status":"publish","type":"post","link":"https:\/\/iani.co\/blog\/encoding-space-characters-in-jquery-ajax-request\/","title":{"rendered":"Encoding space characters in jQuery ajax request"},"content":{"rendered":"<p>I&#8217;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&#8217;s take for example Microsoft Forms or files in nested folders in SharePoint Online.<\/p>\n<h2>Problem<\/h2>\n<p>As I was passing a long URL which contained &#8221; &#8221; space characters I&#8217;ve noticed that the jQuery.ajax function was encoding these characters to &#8220;+&#8221; (plus) sign and not the well known &#8220;%20&#8221;.\u00a0 Read 2354 articles, including <a href=\"https:\/\/stackoverflow.com\/questions\/1634271\/url-encoding-the-space-character-or-20\" target=\"_blank\" rel=\"noopener\">this very interesting one<\/a> which states that &#8220;URL is still broken to this day&#8221;. The takeaway there is that when you encode the space characters you should follow this simple rule:<\/p>\n<blockquote><p>&#8220;<strong>You should have <code>%20<\/code> before the <code>?<\/code> and <code>+<\/code> after.<\/strong>&#8220;<\/p><\/blockquote>\n<p>Even when using encodeURI() function or simply replace() function the value passed was still encoded by jQuery converting the &#8221; &#8221; or &#8220;%20&#8221; to &#8220;+&#8221;.<\/p>\n<h2>Solution<\/h2>\n<p>But finally I found the solution and it was something very basic so that&#8217;s why I am sharing this with you. On the <a href=\"http:\/\/api.jquery.com\/jQuery.ajax\/#jQuery-ajax-settings\" target=\"_blank\" rel=\"noopener\">official jQuery.ajax() documentation <\/a> in the list of settings, there is this &#8220;processData&#8221; which is by default true.<\/p>\n<blockquote>\n<div><em><strong>processData<\/strong> (default: <code>true<\/code>)<\/em><\/div>\n<div><em>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a><\/em><\/div>\n<div><em>By default, data passed in to the <code>data<\/code> 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 &#8220;application\/x-www-form-urlencoded&#8221;. If you want to send a DOMDocument, or other non-processed data, set this option to <\/em><code><em>false<\/em><\/code><\/div>\n<\/blockquote>\n<div><\/div>\n<div>Normally this is very useful because it processes the data passed but in my case it was messing up the data being sent.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;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&#8217;s take for example Microsoft Forms or files in nested folders in SharePoint Online. Problem As I was passing a long URL which contained &#8221; &#8221; space [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[10,9],"_links":{"self":[{"href":"https:\/\/iani.co\/blog\/wp-json\/wp\/v2\/posts\/28"}],"collection":[{"href":"https:\/\/iani.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iani.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iani.co\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iani.co\/blog\/wp-json\/wp\/v2\/comments?post=28"}],"version-history":[{"count":6,"href":"https:\/\/iani.co\/blog\/wp-json\/wp\/v2\/posts\/28\/revisions"}],"predecessor-version":[{"id":53,"href":"https:\/\/iani.co\/blog\/wp-json\/wp\/v2\/posts\/28\/revisions\/53"}],"wp:attachment":[{"href":"https:\/\/iani.co\/blog\/wp-json\/wp\/v2\/media?parent=28"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iani.co\/blog\/wp-json\/wp\/v2\/categories?post=28"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iani.co\/blog\/wp-json\/wp\/v2\/tags?post=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}