How to prepare encoded POST data on javascript?

Question

I need to send data by POST method.

For example, I have the string "bla&bla&bla". I tried using encodeURI and got "bla&bla&bla" as the result. I need to replace "&" with something correct for this example.

What kind of method should I call to prepare correct POST data?

UPDATED:

I need to convert only charachters which may broke POST request. Only them.

Answer 1

>>> encodeURI("bla&bla&bla")

"bla&bla&bla"

>>> encodeURIComponent("bla&bla&bla")

"bla%26bla%26bla"

Answer 2

You can also use escape() function.The escape() function encodes a string. This function makes a string portable, so it can be transmitted across any network to any computer that supports ASCII characters.This function encodes special characters, with the exception of: * @ - _ + . /

var queryStr = "bla&bla&bla";
alert(queryStr);               //bla&bla&bla
alert(escape(queryStr));       //bla%26bla%26bla

Use unescape() to decode a string.

var newQueryStr=escape(queryStr);
alert(unescape(newQueryStr));   //bla&bla&bla

Note:

    escape() will not encode: @*/+

    encodeURI() will not encode: ~!@#$&*()=:/,;?+'

    encodeURIComponent() will not encode: ~!*()'

After some search on internet, I got the following:

escape()

Don't use it.

encodeURI()

Use encodeURI when you want a working URL. Make this call:

encodeURI("http://www.google.com/a file with spaces.html")

to get:

http://www.google.com/a%20file%20with%20spaces.html

Don't call encodeURIComponent since it would destroy the URL and return

http%3A%2F%2Fwww.google.com%2Fa%20file%20with%20spaces.html

encodeURIComponent()

Use encodeURIComponent when you want to encode a URL parameter.

param1 = encodeURIComponent("http://xyz.com/?a=12&b=55")

Then you may create the URL you need:

url = "http://domain.com/?param1=" + param1 + "&param2=99";

And you will get this complete URL:

http://www.domain.com/?param1=http%3A%2F%2Fxyz.com%2F%Ffa%3D12%26b%3D55¶m2=99

Note that encodeURIComponent does not escape the ' character. A common bug is to use it to create html attributes such as href='MyUrl', which could suffer an injection bug. If you are constructing html from strings, either use " instead of ' for attribute quotes, or add an extra layer of encoding (' can be encoded as %27).

REF:When are you supposed to use escape instead of encodeURI / encodeURIComponent?

Also, as you are using JQuery, take a look at this built-in function.

Answer 3

Use encodeURIComponent() as encodeURI() will not encode: ~!@#$&*()=:/,;?+'

This has been explained quite well at the following link:

http://xkr.us/articles/javascript/encode-compare/

Answer 4

More recent DOM APIs for URLSearchParams (and via URL, possibly others too) handle encoding in some cases. For example, create or use an existing URL object (like from an anchor tag) I map entries of an object as key value pairs for URL encoded params (to use for GET/POST/etc in application/x-www-form-urlencoded mimetype). Note how the emoji, ampersand and double quotes are encoded without any special handling (copied from the Chrome devtools console):

var url = new URL(location.pathname, location.origin);
    Object.entries({a:1,b:"",c:'"stuff&things"'}).forEach(url.searchParams.set, url.searchParams);
    url.search;
    "?a=1&b=%F0%9F%8D%BB&c=%22stuff%26things%22"

fetch(url.pathname, {
    method: 'POST',
    headers: new Headers({
        "Content-type": "application/x-www-form-urlencoded"
    }),
    // same format as GET url search params a&b&c
    body: url.searchParams
}).then((res)=>{ console.log(res); return res }).catch((res)=>{ console.warn(res); return res; });

Answer 5

I want POST the javascript-created hidden form.

So the question is if encodeURIComponent() should be used on each POST variable.

I haven't found the answer for Dmitry's (and my) question in this thread. But I have found the answer in this thread.

In case of form/POST where you have upload field(s) you must use <form enctype="multipart/form-data">, if no upload field is used, you should choose yourself as described here. Submitting the form should do the job completly, so there is no need to use encodeURIComponent() explicitly.

If you create a Http POST without using a form or without some library which creates a Http POST from your data, then you need choose an enctype= and join data yourselves.

This will be easy for application/x-www-form-urlencoded, where you will use encodeURIComponent() on each value and join them exactly as for GET request.

If you decide use multipart/form-data then ....? You should google more how to encode and join them in such case.

Answer 6

For anyone still wondering, there is a much easier way to do this now. You could use URLSearchParams[1] class in JS (Docs). Which accepts an Object parameter in the constructor. You can then call .toString() on the instance to get the actual parameters, encoded using encodeURIComponent()

Then, in the actual request, you need to specify the Content-Type header to be application/x-www-form-urlencoded, and simply set the body property of the request to the String returned by the params.toString() method.

const data = {"hello[World}": ``, "goodbye": ``};
const params = new URLSearchParams(data);

const endpoint = `https://example.com`;

fetch(endpoint, {
  method: `POST`,
  headers: {
    "Content-Type": `application/x-www-form-urlencoded`,
  },
  body: params.toString(), // hello%5BWorld%7D=%F0%9F%A5%91&goodbye=%F0%9F%98%9E
});