jQuery AJAX / Posting data with symbols

Question

I am sending quite a few values with my AJAX call, like this:

var postData = "aid="+aid+"&lid="+lid+"&token="+token+"&count="+count+"&license="+license;
postData = postData + "&category="+category+"&event_name="+event_name+"&set_menu="+set_menu;
postData = postData + "&set_id="+set_id+"&location="+location+"&delay="+delay;

and then sending the call like this:

$.ajax({
    type : 'GET',
    url : 'ajax/createFolderID.asp',
    dataType : 'html',
    data : postData,
    success : function() { do something },
    complete : function() { do something },
    error : function() { do something }
});

The problem is, one of the querystring values, "event_name", comes from user input. If the user enters an ampersand (&) symbol, the postData string breaks and won't send anything after that symbol.

Example case: &event_name=D&G Clothing Launch Party&set_menu=existing...

I understand what is going wrong, but not so sure what the best fix would be. Do I convert those characters to something else, or is there a way of escaping them? Also, are there any other characters that will cause harm to the script, like plus (+) or minus (-) signs, or apostrophes (')?

score 6 · Answer 1 · answered Feb 01 '12 at 20:34

6

Escape each of your values.

var postData = "aid="+escape(aid)+"&lid="+escape(lid) ... ;

answered Feb 01 '12 at 20:34

Oybek

7,016
5
29
49

This worked great thanks. It was just the event_name variable that could possibly contain bad characters, so I escaped just that one. – TheCarver Feb 01 '12 at 20:54

Samuel Edwin Ward · Accepted Answer · 2014-01-25T19:37:48.523

3

If you pass the postData to jQuery as a map, it will encode the components for you:

var postData = { aid: aid,
                 lid: lid,
                 ...

If you really need to pass a string, you should use encodeURIComponent to properly encode the user data.

The W3C has some more information on form encoding.

edited Jan 25 '14 at 19:37

answered Feb 01 '12 at 20:42

Samuel Edwin Ward

6,526
3
34
62

Thanks, I will read this. The string in question is only a short one, an event name, and comes from my office staff, not general public. I used escape(variable) as @Oybek suggested. – TheCarver Feb 01 '12 at 20:59
The `escape` function is deprecated. It is better to use the more specific `encodeURIComponent` function. (Although escape will probably work). see: http://stackoverflow.com/questions/75980/best-practice-escape-or-encodeuri-encodeuricomponent – Samuel Edwin Ward Feb 02 '12 at 14:14
Nearly two years on I find my question (this question) on Google. After a bit more experience gained, I now think this is the better answer, so I have swapped the previously accepted answer to yours. – TheCarver Jan 25 '14 at 15:23

score 1 · Answer 3 · edited May 23 '17 at 11:59

1

First use a Map.

post = {
    "aid":aid,
    "lid":lid,
    "token":token
    ...
}

Then generate url-encoded string.

a=[];
for(var x in post){
    a.push(encodeURIComponent(x)+"="+encodeURIComponent(post[x]));
}
var postData = a.join("&");

Update 1: If you are using jQuery no need to generate url-encoded string. Just pass the map.

Update 2: escape is not good as it only handles with ASCII. So using encodeURIComponent. ^{When are you supposed to use escape instead of encodeURI / encodeURIComponent?} Thanks @SamuelEdwinWard

edited May 23 '17 at 11:59

Community

1
1

answered Feb 01 '12 at 20:45

Shiplu Mokaddim

56,364
17
141
187

Better to use `encodeURIComponent` rather than `escape` (as jQuery does). – Samuel Edwin Ward Feb 02 '12 at 15:04

score 0 · Answer 4 · edited May 23 '17 at 10:28

0

Just use :

 postData = encodeURIComponent (postData);

before lauching it.

escape, unescape, encodeURI, encodeURIComponent are various methods you may need using Ajax. However, if you use escape (http://www.google.com), you will also escape ://, destroying your URI. That's why you should use encodeURI, or encodeURIComponent. See also When are you supposed to use escape instead of encodeURI / encodeURIComponent?

edited May 23 '17 at 10:28

Community

1
1

answered Feb 01 '12 at 20:34

Nicolas Zozol

6,910
3
50
74

2

Escaping this way will collapse the whole your query string. The result will be the same as posting like this `http://example.com/path/?somegarbage` – Oybek Feb 01 '12 at 20:35

jQuery AJAX / Posting data with symbols

4 Answers4