Notice the pattern

The encoding of characters to send in a URL or in the body of a request is not as simple and may vary as the case may be. If the problem were just with the URL, a simple override would work, but there are standards.

Use encodeURIComponent() , carefully

As Antonio Carlos has already said in the other answer, you should use the encodeURIComponent() .

However, while encodeURIComponent transforms all special characters to the required format, a few symbols are ignored: ! , ' , ( , ) and * .

Encoding additional characters

Mozilla documentation gives an example of how to "fix" this and better adhere to the character specification ( RFC 3986 ):

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

Encoding spaces for application/x-www-form-urlencoded

In addition, if you are making a request of type POST and the body encoding format is application/x-www-form-urlencoded , then to adjust to the default you must still replace the %20 spaces with the sum signal ( + ).

Example:

function toFormUrlEncoded(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  }).replace(/%20/g, "+");
}

Use only parameter values

Another important detail is that you can not use encodeURIComponent in the entire URL, but must use in each parameter value. For example:

var url = '/destino?param=' + encodeURIComponent(valorParametro);

Or better yet, use a "fix" routine:

var url = '/destino?param=' + toFormUrlEncoded(valorParametro);
//ajax post 

Beware of encodeURI

To encode an entire URL, the encodeURI . In theory, it should encode the ready-made URL instead of a parameter, but it does not encode control characters like ? and & .

So it is not very reliable, because if you have something like param=eu & você you will have problems the routine can not differentiate a & as a legitimate parameter separator and as part of the value of a parameter.

Normally what you do to send a string through the URL is to use the encodeURIComponent() function, as in the example:

Code:

var uri = "http://w3schools.com/my test.asp?name=ståle&car=saab";
var res = encodeURIComponent(uri);

Result:

http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab

However, note that instead of + it places the %20 code in place of the space.

Another option is to use the encodeURI() function, which has similar effect, but does not replace: , / ? : @ & = + $ # .

Source: link

In addition to what has already been answered by the other two answers, about the use of encodeURIComponent() to escape potentially unpleasant characters, or that I get in the way of using functions to create a strng of an object with data to send.

For example:

function prepareData(data) {
    return Object.keys(data).map(function(key) {
        return [key, data[key]].join('=');
    }).join('&');
}

function parseURI(str) {
    var data = {};
    str.split('&').forEach(function(keyValue){
        var parts = keyValue.split('=');
        data[parts[0]] = parts[1];
    });
    return data;
}

The prepareData function converts objects into a query string , that is from {foo: 'bar'} to foo=bar . In the function the ? is missing that initiates the query string, I prefer to join it separately.

The other does the opposite, used on the client side to read the query string from the URL, using:

var object = parseURI(location.search.slice(1));