Escaping jQuery data being sent via POST

Question

I'm using jQuery.ajax to extract form data from a page, and send it to my database (via another PHP page).

The form information is collected by:

var X=$('#div1').val();
var Y=$('#div2').val();

This is used to build the POST string, i.e.

var data='varx='+X+'&vary='+Y;

Obviously this is problematic if an ampersand character is used. What is the best method to escape the variables, particularly so that the user can safely use an ampersand (&) ?

Thanks!

Answer 1

var X = escape($('#div1').val());

escape();

Answer 2

encodeURIComponent will do what you are looking for.

var X = encodeURIComponent($('#div1').val());
var Y = encodeURIComponent($('#div2').val());

This will encode all potentially insecure characters.

Answer 3

The best would be using an object for the data.

jQuery.post("yourScript.php", {
   varx: X,
   vary: Y
});

or

jQuery.ajax({
      url: "yourScript.php",         
      type: "POST",
      data: ({varx: X, vary: Y}),
      dataType: "text",
      success: function(msg){
         alert(msg);
      }
   }
);

You can also use jQuery's serialize() to get your form data as a serialized querystring:

var data = jQuery(formSelector).serialize();

The .serialize() method creates a text string in standard URL-encoded notation. It operates on a jQuery object representing a set of form elements. The form elements can be of several types.

Way prettier in my opinion :-)

Answer 4

You can use escape function of JavaScript

var data='varx='+escape(X)+'&vary='+escape(Y);