Vamos a definir muy brevemente estos nombres:

UTF-8: uno de los estándares para la representación de caracteres Unicode (cualquier caracter que vean en el “mapa de caracteres” de su SO), utilizando de 1 a 4 bytes.

Caracteres especiales: un nombre ambiguo para referirse a símbolos distintos a los alfanuméricos. Por ejemplo: +, ¿, ?, ¨, &, %, ´.

Ajax: mecanismo utilizado para transferir información entre el DOM de un sitio web (JavaScript) y un servidor (php en este caso).

¿Cuál es el problema?

Ajax utiliza algunos de los caracteres especiales para dar formato a las solicitudes que hace al servidor. Por ejemplo, con ?, = y & se separan los parámetros de los envíos GET. Al mezclarse unos símbolos con otros, la información llega errónea. El otro problema es de codificación: los bytes de un caracter en otro formato equivale a un caracter distinto. Hay que tener cuidado al interpretarlos, almacenarlos y representarlos.

Aquí va una posible solución que abarca todo el problema:

1. Agregar la siguiente etiqueta a la cabecera header del HTML:

<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />

Atención: no copiar y pegar porque las comillas salen erróneas!

2. En cada solicitud a través de Ajax, escapar el texto con la siguiente función javascript:

encodeURIComponent(texto)

3. Cuando php reciba el parámetro, decodificarlo de la siguiente manera:

rawurldecode(utf8_decode($_POST['parametro']))

4. Cuando queramos devolver texto en respuesta a un pedido Ajax, utilizar lo siguiente:

utf8_encode($texto)

Listo