Comment passer des caractères spéciaux avec AJAX ?

Question

Bonjour, j'ai un bug avec un formulaire HTML dont je récupère la valeur d'un champ texte, et que je passe à un script PHP avec AJAX jQuery. Lorsque des caractères spéciaux comme le ? ou le # sont présents dans la valeur de l'input cela bug.

Voilà le code HTML :

<input type="text" name="info" value="exemple avec un ? ou et #" id="info">

Et mon code AJAX :

<script>
function action(info){
$.ajax({
url : 'action.php',
type : 'GET', 
data : 'info=' + info, 
dataType : 'html',
success : function(reponse){
// ...
});
}
$('#action').click( function(){
var info= document.getElementById("info").value;
action(info);
});
</script>

Answer 1

Les caractères spéciaux comme le # ou le ?, lorsqu'ils sont passés dans l'URL, sans être préalablement encodés, vont être interprétés par votre navigateur.

Le # sera interprété comme une ancre HTML, et le ?, ou bien même le &, comme un paramètre GET de l'URL.

Vous devez donc encoder la valeur de votre input en une séquence d'échappement UTF-8 ; et pour cela il existe la fonction JavaScript encodeURIComponent().

Pour reprendre votre exemple, il suffit d'encoder la variable info :

var info = encodeURIComponent(document.getElementById("info").value);

De cette manière tous les caractères spéciaux , / ? : @ & = + $ # seront encodés dans l'URL et ne seront plus interprétés.

Vous trouverez d'avantage d'information sur la fonction encodeURIComponent() via cette page du site de Mozilla.

Comments

Merci beaucoup ça fonctionne.