I'm developing a Web App that uses JavaScript + JQuery on the client side and PHP on the server side.

One of the strings I want to pass as parameter for an AJAX Request has a '&' in its content.

For this reason, the string of the request is broken. The browser "thinks" that this parameters is over because there is a '&' on the string.

var hasChar = "This is a string that has a & in the content.";
var doesntHave = "This one does not contain.";
var dataString = "first=" + hasChar + "&second=" + doesntHave;

$.ajax({
    type : "POST",
    url : "myurl.php",
    data : dataString,
    cache : false,
    success : function(html) {
    }
});

The server receives the first parameter as "This is a string that has a "

My Question:

How to I encode the string on the client side and how should I decode it on the PHP server.

I'm developing a Web App that uses JavaScript + JQuery on the client side and PHP on the server side.

One of the strings I want to pass as parameter for an AJAX Request has a '&' in its content.

For this reason, the string of the request is broken. The browser "thinks" that this parameters is over because there is a '&' on the string.

var hasChar = "This is a string that has a & in the content.";
var doesntHave = "This one does not contain.";
var dataString = "first=" + hasChar + "&second=" + doesntHave;

$.ajax({
    type : "POST",
    url : "myurl.php",
    data : dataString,
    cache : false,
    success : function(html) {
    }
});

The server receives the first parameter as "This is a string that has a "

My Question:

How to I encode the string on the client side and how should I decode it on the PHP server.

• javascript
• jquery
• parameter-passing

9 Answers 9

Let jQuery handle the encoding of hasChar (and your other params) for you:

var hasChar = "This is a string that has a & in the content.";
var doesntHave = "This one does not contain.";

$.ajax({
    type : "POST",
    url : "myurl.php",
    data : { first: hasChar, second: doesntHave },
    cache : false,
    success : function(html) {
    }
});

Why not to do following:

    $.ajax({
        type : "POST",
        url : "myurl.php",
        data : {
          'first': hasChar,
          'second': doesntHave
        },
        cache : false,
        success : function(html) {
        }
    });

In this case jQuery will make sure that string is properly encoded.

As an alternative you can use encodeURIComponent() JS's built in function for properly encoding strings:

var dataString = "first=" + encodeURIComponent(hasChar) + "&second=" + encodeURIComponent(doesntHave);

You can use .param;

dataString = $.param({first: asChar, second: doesntHave});

or if you want to skip the $.param part as metioned by @alex-k

data : {'first': hasChar, 'second': doesntHave},

You can just set it as an object:

var hasChar = "This is a string that has a & in the content.";
var doesntHave = "This one does not contain.";

$.ajax({
    type : "POST",
    url : "myurl.php",
    data : {first: hasChar, second: doesntHave},
    cache : false,
    success : function(html) {
    }
});

You can also use encodeURI:

var encodedData = encodeURI(dataString);
$.ajax({
    type : "POST",
    url : "myurl.php",
    data : encodedData,
    cache : false,
    success : function(html) {
    }
});

Link

If you want server-side de/encoding use urlencode() and urldecode().

Try this

var dataString = {};
dataString["hasChar"] = "This is a string that has a & in the content.";
dataString["doesntHave"] = "This one does not contain.";

$.ajax({
    type : "POST",
    url : "myurl.php",
    data : dataString,
    cache : false,
    success : function(html) {
    }
});

Your parameters need to be simply URL-encoded. On the PHP side, you won't need to decode them, everything will work as normal.

There is a Javascript function called encodeURIComponent() that will correctly URL-encode your string. So on the basic level, you can do this:

var dataString = "first=" + encodeURIComponent(hasChar) + "&second=" + encodeURIComponent(doesntHave);

If you use jQuery, it will automatically handle this for you, if in your $.ajax() call you pass it an object instead of a query string:

The data option can contain either a query string of the form key1=value1&key2=value2, or a map of the form {key1: 'value1', key2: 'value2'}. If the latter form is used, the data is converted into a query string using jQuery.param() before it is sent.

So you only have to do this in your code:

var dataString = { first: hasChar, second: doesntHave);