ToutSurTout.biz / Poster des données en Ajax

Loic · Discussion postée le 28-05-2012 à 11:43:34

Présentation d'une manière de coder un petit script de post en Ajax.

Prenons un exemple plutôt pratique, la vérification de mail en ajax.

Tout d'abord, pour notre exemple il nous faut un formulaire en html :

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Post en ajax</title>
</head>
<body>
<h1>Post en ajax</h1>
<form action="post.php" method="post">
<input type="text" name="mail" class="mail">
<input type="submit" value="Vérifier la validité du mail">
</form>
</body>
</html>

Ensuite, pour facilité l'envoie en ajax, on va utiliser la librairie JQuery, il faudra donc l'importer (on en profite pour importer notre script JS qui va se charger de l'envoie des requêtes ajax) :

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Post en ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Post en ajax</h1>
<form action="post.php" method="post">
<input type="text" name="mail" class="mail">
<input type="submit" value="Vérifier la validité du mail">
</form>
</body>
</html>

Maintenant place au JS. Notre script "script.js" étant importé, il nous reste plus qu'à s'en occuper. On va faire ça étape par étape.
Pour commencer, on va d'abord vérifier que JQuery est chargé :

$(document).ready(function(){

});

Ensuite, on va attendre que l'utilisateur soumet le formulaire (appuie sur le bouton "Vérifier la validité du mail") :

$(document).ready(function(){
$('form').submit(function(){

/* On retourne false pour éviter le changement de page */
return false;
});
});

Maintenant qu'on sait que l'utilisateur a soumis le formulaire, il est temps de récupérer la valeur du champs de class "mail"

$(document).ready(function(){
$('form').submit(function(){
var mail = $('.mail').val();

/* On retourne false pour éviter le changement de page */
return false;
});
});

Désormais, place au plus important, la requête ajax. Pour une requête ajax il est important de connaitre les différents paramètres.
Il nous faut d'abord l'url sur laquelle va être envoyé la requête (pour notre exemple, il s'agira de la page "post.php"), il nous faut la méthode employée (post ou get), il nous faut également les données à envoyer (là il s'agit du mail) et finalement la fonction qui va traiter les données reçues.

Pour faire une requête ajax, on va utiliser la fonction .ajax().

$(document).ready(function(){
$('form').submit(function(){
var mail = $('.mail').val();
$.ajax({
url : 'post.php', /* Il s'agit de l'url ou seront traités les données */
type: 'POST', /* Il s'agit de la méthode employée */
data: 'mail=' + mail, /* Il s'agit des données à envoyé, en occurrence le mail */
success: function(data){
/* La fonction à exécuter avec les données reçu */
}
});

/* On retourne false pour éviter le changement de page */
return false;
});
});

Ca y est, vous avez envoyé une requête ajax de type POST.
Avant d'aller plus loin, il faut s'attaquer au code php qui va gérer l'envoie de données.

Pour commencer, on va vérifier que des données on bien été postées :

<?php
if(isset($_POST['mail'])){ // Les données ont bien été postées

if(!empty($_POST['mail'])){ // Si le champs n'est pas vide, on traite les données

}else{ // Sinon on envoie une erreur

}
}else{
// Les données n'ont pas été postées alors on redirige vers l'index
header('LOCATION:index.php');
}
?>

On va commencer par gérer la validité de l'adresse mail. Pour cela, on utilisera la fonction filter_var() de php5. Je proposerais également un regex pour ceux d'entre vous qui ne serait pas à jour.

<?php
if(isset($_POST['mail'])){ // Les données ont bien été postées

if(!empty($_POST['mail'])){ // Si le champs n'est pas vide, on traite les données

/*
### Avec la REGEX ###
if(preg_match('#(.+)@[a-z]\.[a-z]{2,4}#', $_POST['email']))
*/

if(filter_var($_POST['mail'], FILTER_VALIDATE_EMAIL)){

// Si le mail est valide, on envoie un message de validation
$status = 'ok';
$message = 'Le mail est valide.';

}else{

// Si le mail n'est pas valide en renvoie une erreur

}
}else{ // Sinon on envoie une erreur

}

}else{
// Les données n'ont pas été postées alors on redirige vers l'index
header('LOCATION:index.php');
}
?>

On sait désormais si le mail est valide ou non, il est temps de gérer les erreurs :

<?php
if(isset($_POST['mail'])){ // Les données ont bien été postées

if(!empty($_POST['mail'])){ // Si le champs n'est pas vide, on traite les données

/*
### Avec la REGEX ###
if(preg_match('#(.+)@[a-z]\.[a-z]{2,4}#', $_POST['email']))
*/

if(filter_var($_POST['mail'], FILTER_VALIDATE_EMAIL)){

// Si le mail est valide, on envoie un message de validation
$status = 'ok';
$message = 'Le mail est valide.';

}else{

// Si le mail n'est pas valide en renvoie une erreur
$status = 'erreur';
$message = 'Le mail est invalide.';

}
}else{ // Sinon on envoie une erreur
$status = 'erreur';
$message = 'Le champs est vide.';
}

}else{
// Les données n'ont pas été postées alors on redirige vers l'index
header('LOCATION:index.php');
}
?>

Les variables status et message sont définies dans tous les cas de figure possible, c'est fini ? Et bien pas encore, il reste une tout dernière chose à faire : L'affichage des données en json.
Je suis sur que certains d'entre vous panique déjà, mais rassurez vous, encore une fois rien de compliqué :

<?php
if(isset($_POST['mail'])){ // Les données ont bien été postées

if(!empty($_POST['mail'])){ // Si le champs n'est pas vide, on traite les données

/*
### Avec la REGEX ###
if(preg_match('#(.+)@[a-z]\.[a-z]{2,4}#', $_POST['email']))
*/

if(filter_var($_POST['mail'], FILTER_VALIDATE_EMAIL)){

// Si le mail est valide, on envoie un message de validation
$status = 'ok';
$message = 'Le mail est valide.';

}else{

// Si le mail n'est pas valide en renvoie une erreur
$status = 'erreur';
$message = 'Le mail est invalide.';

}
}else{ // Sinon on envoie une erreur
$status = 'erreur';
$message = 'Le champs est vide.';
}

// On défini le tableau json
$json = array('status' => $status, 'message' => $message);

// On affiche les données en json
echo json_encode($json);

}else{
// Les données n'ont pas été postées alors on redirige vers l'index
header('LOCATION:index.php');
}
?>

Le code php est désormais fini. Nous sommes désormais prêt à finaliser notre fonction ajax en JS.
Pour commencer, on va vérifier qu'il n'y a pas d'erreur :

$(document).ready(function(){
$('form').submit(function(){

var mail = $('.mail').val();
$.ajax({
url: 'post.php', /* Il s'agit de l'url ou seront traités les données */
type: 'POST', /* Il s'agit de la méthode employée */
data: 'mail=' + mail, /* Il s'agit des données à envoyé, en occurrence le mail */
success: function(data){
/* La fonction à éxécuter avec les données reçu */
donneesRecu = $.parseJSON(data);

if(donneesRecu.status == 'erreur'){
/* S'il y a une erreur, on affiche le message d'erreur dans le formulaire */

}else{
/* Sinon on affiche l'autre message */

}
}
});
/* On retourne false pour éviter le changement de page */
return false;
});
});

Vous remarquerez que pour récupérer le status il suffit simplement de faire ".status" (il en va de même pour le message avec ".message"), et tout ceci grâce à JSON.
On pourrait faire un simple "alert", mais bon tant qu'à faire réaliste, autant le faire jusqu'au bout.

$(document).ready(function(){
$('form').submit(function(){
/* On enlève le message du code html */
$('form span').remove();

var mail = $('.mail').val();
$.ajax({
url: 'post.php', /* Il s'agit de l'url ou seront traités les données */
type: 'POST', /* Il s'agit de la méthode employée */
data: 'mail=' + mail, /* Il s'agit des données à envoyé, en occurrence le mail */
success: function(data){
/* La fonction à exécuter avec les données reçues */
donneesRecu = $.parseJSON(data);

if(donneesRecu.status == 'erreur'){
/* S'il y a une erreur, on affiche le message d'erreur dans le formulaire */
$('form').append('<span style="color: red; font-weight: bold">' + donneesRecu.message + '</span>');

}else{
/* Sinon on affiche l'autre message */
$('form').append('<span style="color: green; font-weight: bold">' + donneesRecu.message + '</span>');

}
}
});
/* On retourne false pour éviter le changement de page */
return false;
});
});

Et c'est terminé !

A retenir :

- L'utilisation de $.ajax() de JQuery (ca comprends les différents paramètres url, type, data, success).
- L'utilisation de la fonction $.parseJSON() en jquery.
- L'utilisation de la fonction filter_var() de php5 (elle peut être utilisé pour autre chose que les mails, et je là conseille vivement pour éviter certaines failles).
- L'utilisation de la fonction json_encode() en php, qui permet de convertir un tableau php (array) en tableau json.
- Le return false en JS qui permet de ne pas changer de page, très important car sans celui ci le système tombe à l'eau.

• Annonce ToutSurTout

Message 1 Discussion postée le 28-05-2012 à 11:43:34

Poster des données en Ajax