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(){
            


        

Answer 1

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 :-)

Answer 2

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.

Answer 3

$.ajax({

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

Answer 4

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!" );
      }
   });

});