Ampersand (&) character inside a value of jQuery AJAX request data option

Question

I am performing asynchronous HTTP (Ajax) requests via jQuery with the basic $.ajax(). The code looks like the following:

$("textarea").blur(function(){
   var thisId = $(this).attr("id");
   var thisValue = $(this).val();

   $.ajax({
      type: "POST",
      url: "some.php",
      data: "id=" + thisId + "&value=" + thisValue,
      success: function(){
        alert( "Saved successfully!" );
      }
   });

});

Everything is working properly as usual, until user types inside textarea ampersand (&) character. Than when I debug PHP function, which saves the value, it always have a value until this character.

I believe there has to be a solution to skip ampersand (&) somehow. Any ideas?

score 88 · Accepted Answer · answered Nov 19 '10 at 15:31

88

Instead of:

data: "id=" + thisId + "&value=" + thisValue

do:

data: { id: thisId, value: thisValue }

This way jquery will take care of properly URL encoding the values. String concatenations are the root of all evil :-)

answered Nov 19 '10 at 15:31

Darin Dimitrov

1,023,142
271
3,287
2,928

but then I will be able to get values in PHP file using simple $_POST[] ? The same as passing values in a string, right?! – Nik Sumeiko Nov 22 '10 at 07:19
@Nikita, yeap, absolutely the same way. The difference is that they will be properly encoded. – Darin Dimitrov Nov 22 '10 at 07:21
3

Thanks. This saved me a lot of headache. – JordanC Apr 08 '11 at 05:43
Thanks for this solution! I never knew of this one :) – Afzaal Ahmad Zeeshan May 20 '14 at 11:52
Thanks @DarinDimitrov. :) Perfect solution +1 – Abhishek Jan 27 '17 at 09:55
Thanks... Great Solution. You have saved my time. – Breen ho Mar 16 '17 at 16:38

score 30 · Answer 2 · edited May 23 '17 at 11:54

30

Strongly recommend you use the solution provided by Darin above if at all possible; that way, you get to reuse well-tested code for building POST data.

But if you really, really, really need to use string concatenation (here, or elsewhere in your application when building up query strings or POST data out of user inputs), you need to use encodeURIComponent:

$("textarea").blur(function(){
   var thisId = $(this).attr("id");
   var thisValue = $(this).val();

   $.ajax({
      type: "POST",
      url: "some.php",
      data: "id=" + encodeURIComponent(thisId) + "&value=" + encodeURIComponent(thisValue),
      success: function(){
        alert( "Saved successfully!" );
      }
   });
});

By default when sending a POST with jQuery.ajax, you're sending data with the content type application/x-www-form-urlencoded, which means you're promising that the data is encoded that way. You have to be sure to keep your part of the bargain and actually encode it. This isn't just important for ampersands.

edited May 23 '17 at 11:54

Community

1
1

answered Nov 19 '10 at 15:36

T.J. Crowder

1,031,962
187
1,923
1,875

+1 for explaining _why_ the error occurred and how to fix it as is. – sholsinger Nov 19 '10 at 15:55
I actually tried this and it didn't work. I also tried replacing `&` with `&` and that did nothing aswell, surprisingly. – Eduard Luca Oct 19 '12 at 19:36
1

@EduardLuca: *"I actually tried this and it didn't work."* You'd have to give some specifics (probably in your own question);`encodeURIComponent` **is** the correct way to do this. *"I also tried replacing & with & and that did nothing aswell, surprisingly"* Actually not surprising, as that's HTML entity encoding which has nothing whatsoever to do with URI encoding. – T.J. Crowder Oct 19 '12 at 22:51
Exactly, `&` is a HTML entity, so it shouldn't take it as part of the URL, but as part of the string inside the URL params. When I said "I tried this" I actually meant I tried exactly your solution with `encodeURIcomponent` on all fields, and it had no effect whatsoever. – Eduard Luca Oct 19 '12 at 22:56
1

@EduardLuca: *"Exactly, & is a HTML entity, so it shouldn't take it as part of the URL, but as part of the string inside the URL params."* Huh? Computers don't guess at how things are encoded (usually). If you include it in the URL, then the server will treat it as URI-encoded, because that's how URIs are defined. If you include it in form data in a POST, it will be treated as URI-encoded, because that's how *that* is defined. Again, without showing your specific situation (and that would suggest you need to post a question, not a comment), "it had no effect" has exactly no meaning. – T.J. Crowder Oct 19 '12 at 23:36
OK, nevermind, I was just trying to point something out, but I guess it got personal for you or something. I've long fixed it using Darin Dimitrov's answer. – Eduard Luca Oct 19 '12 at 23:39
@EduardLuca: No, nothing personal. I just don't see what you're saying, and don't see how others could based on what you've posted either. I'm big into data, evidence, that kind of thing. Sorry if I came off in some other way. (And for the record: All Darin's answer does -- and it's a good answer, that's how I do it -- is offload the call to `encodeURIComponent` to jQuery's code. The net result is the same.) – T.J. Crowder Oct 19 '12 at 23:42
I love you! I spend hours trying to figure out why the frak the ambersand was stripped on posts... thank you! – Spock Jul 10 '13 at 07:31

score 6 · Answer 3 · answered Nov 19 '10 at 15:35

just use the javascript function encodeURIComponent():

$("textarea").blur(function(){
   var thisId = $(this).attr("id");
   var thisValue = $(this).val();

   $.ajax({
      type: "POST",
      url: "some.php",
      data: "id=" + thisId + "&value=" + encodeURIComponent(thisValue),
      success: function(){
        alert( "Saved successfully!" );
      }
   });

});

score 0 · Answer 4 · edited Feb 25 '14 at 10:11

0

$.ajax({

   type:'POST',
 dataType: "text",
   url:'save.php',
   data:'_id='+$('#id').val()+'&title='+$('#title').val(),
??
data: { id: thisId, value: thisValue }

edited Feb 25 '14 at 10:11

Rahil Wazir

10,007
11
42
64

answered Feb 25 '14 at 09:50

Selim Destancı

1

Is this a solution you're providing? – Rahil Wazir Feb 25 '14 at 10:11

Ampersand (&) character inside a value of jQuery AJAX request data option

4 Answers4

Linked