jQuery: ajax POST with html entities

Question

Helloes. I've been sending forms with jQuery ajax & $(this).serialize to php & database and it has worked perfectly. Now I have situation where I can't use serialized form but generate a string from different input fields instead and the problem is that it appears to lose some URL entities in the process.

for example "&phone=+358123456789" turns out "&phone= 358123456789" losing the plus character and ends up with whitespace to the database. "&phone=%2B358123456789" works fine though.

as there might be lots of other chars than "+" that could be lost, so I'm asking if there's a function similar to php's htmlentities that would convert a string? I've tried javascript's escape() & unescape() without success and meddled with jquery's .text() & .html() but that ended poorly aswell.

Answer 1

use encodeURIComponent in your data string.

Answer 2

You can still pass the data as an object to your $.ajax() (or AJAX shorthand) methods, for example:

$.ajax({
  url: 'myPage.php',
  type: 'POST',
  data: { phone: $("#phone").val(),
          other: $("#other").val() }
});

You just pass the { param: value, param2: value } object where you would have put .serialize() before. This method will call encodeURIComponent() internally since that's what $.param() that it uses does :)