- Inscription
- 22 Octobre 2011
- Messages
- 14 706
- Réactions
- 8 492
- Points
- 32 425
Bonjour à tous,
Si je fais un die c'est pour que le script s'arrête, si je n'en mettais pas le script aurait continué et il nous aurait sorti le contenu de la page HTML.
Soumettez le formulaire et regardez ce qu'il se passe, magique non ?
Je trouve que mettre cette ligne à chaque fois qu'on veut rendre un message n'est pas propre, personnellement j'utilise toujours la POO, donc je me fais des fonctions qui me permettent d'avoir du code plus propre et moins bordélique.
On peut bien sûr faire une fonction sans utiliser la POO. Voici un exemple.
Vous devriez avoir ça comme rendu :
Ce n'est pas tout à fait ce que l'on voulait, pour "patcher" ça mettez là où vous définissez les variables en JavaScript ce petit bout de code qui va vider la DIV à chaque soumission du formulaire.
Dans ce tutoriel je vais vous apprendre à manier l'Ajax (acronyme d'Asynchronous JAvascript and Xml) et l'utiliser dans un cas concret.
Nous allons donc faire un formulaire qui envoie les données soumises sans rafraîchir la page, et bien sûr en affichant les erreurs s'il devait y en avoir, tout le code sera sur la même page.
De minimes bases sont requises en PHP et en Javascript pour suivre le tutoriel.
Avant de commencer sachez que je ne suis pas un professionnel en Javascript, si je fais une erreur ou si vous avez de meilleure façon de faire les choses dîtes-le moi en commentaire.
Pour commencer nous allons créer la base de la page, c'est à dire le formulaire, et en-dessous nous allons préparer le script.
Nous allons donc faire un formulaire qui envoie les données soumises sans rafraîchir la page, et bien sûr en affichant les erreurs s'il devait y en avoir, tout le code sera sur la même page.
De minimes bases sont requises en PHP et en Javascript pour suivre le tutoriel.
Avant de commencer sachez que je ne suis pas un professionnel en Javascript, si je fais une erreur ou si vous avez de meilleure façon de faire les choses dîtes-le moi en commentaire.
Pour commencer nous allons créer la base de la page, c'est à dire le formulaire, et en-dessous nous allons préparer le script.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax Form</title>
</head>
<body>
<form method="POST">
<label for="field1">Champs 1 </label><input type="text" id="field1">
<br />
<label for="field2">Champs 2 </label><input type="text" id="field2">
<br />
<label for="field3">Champs 3 </label><input type="text" id="field3">
<br />
<input type="submit" id="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
});
</script>
</body>
</html>Nommez vos champs comme vous le souhaitez, je vous conseille pour commencer de faire comme moi et par la suite de modifier le code afin d'obtenir ce que vous vouliez à la base.
Là nous avons notre formulaire avec trois champs qui ont un ID différent, dans notre cas, il est important de mettre des IDs différents à ce que vous voulez manipuler, sinon vous aurez de forte chance d'avoir un code bugué.
Maintenant passons au script.
Là nous avons notre formulaire avec trois champs qui ont un ID différent, dans notre cas, il est important de mettre des IDs différents à ce que vous voulez manipuler, sinon vous aurez de forte chance d'avoir un code bugué.
Maintenant passons au script.
Code:
$('#submit').on('click', function(e){
e.preventDefault();
var field1 = $('#field1').val();
var field2 = $('#field2').val();
var field3 = $('#field3').val();
// Suite du code
});Mettez ça dans le début du script que vous avez, ici nous disons qu'au clique de l’élément qui a comme id submit, on initie les variables field1, field2 et field3 et on leur donne les valeurs des inputs, lisez bien le code vous devriez comprendre rien qu'avec ça que c'est très simple !
Maintenant il faut envoyer en Ajax les valeurs !
Maintenant il faut envoyer en Ajax les valeurs !
Code:
$.ajax({
url: 'index.php',
type: 'POST',
data:{
field1:field1,
field2:field2,
field3:field3,
}
}).done(function(a){
// code de la réponse
});Mettez ça à la suite du code.
Vous pouvez apercevoir qu'il y a quelques paramètres de définis, comme l'URL, le type, ou même DATA, ce sont des paramètres qu'utilise jQuery pour envoyer la requête Ajax.
Il y a d'autres paramètres, comme dataType, success, error, beforeSend etc.. je vous laisse vous renseigner sur le net.
Remplacez index.php par la page dans laquelle vous comptez mettre votre code PHP, je vais mettre tout mon code dans un fichier donc je laisse index.php.
En PHP nous allons rendre un tableau JSON (JavaScript Object Notation), il faut donc parser ce tableau afin d'afficher la réponse, mettez ce code dans le .done(function ....
Vous pouvez apercevoir qu'il y a quelques paramètres de définis, comme l'URL, le type, ou même DATA, ce sont des paramètres qu'utilise jQuery pour envoyer la requête Ajax.
Il y a d'autres paramètres, comme dataType, success, error, beforeSend etc.. je vous laisse vous renseigner sur le net.
Remplacez index.php par la page dans laquelle vous comptez mettre votre code PHP, je vais mettre tout mon code dans un fichier donc je laisse index.php.
En PHP nous allons rendre un tableau JSON (JavaScript Object Notation), il faut donc parser ce tableau afin d'afficher la réponse, mettez ce code dans le .done(function ....
Code:
var response = JSON.parse(a);
$.each(response, function(index, value){
alert(response.response);
});Le alert(response.response) permettra juste d'afficher une pop-up avec le message rendu en PHP.
Place au PHP désormais, rendez-vous tout en haut de votre code, il faut vérifier si on a bien les valeurs voulues. (les field1 etc..).
Place au PHP désormais, rendez-vous tout en haut de votre code, il faut vérifier si on a bien les valeurs voulues. (les field1 etc..).
PHP:
if(isset($_POST['field1']) && isset($_POST['field2']) && isset($_POST['field3']))
{
$field1 = htmlspecialchars(trim($_POST['field1']));
$field2 = htmlspecialchars(trim($_POST['field2']));
$field3 = htmlspecialchars(trim($_POST['field3']));
# la suite
}Nous n'avons quasiment plus rien à faire, avant de faire quoique ce soit nous allons faire un petit test, on va rendre un tableau JSON et lorsqu'on va soumettre le formulaire, le message va s'afficher dans une pop-up.
Mettez à la suite du PHP, ce petit bout de code.
Mettez à la suite du PHP, ce petit bout de code.
PHP:
die(json_encode(array('response' => "Hello World !")));Si je fais un die c'est pour que le script s'arrête, si je n'en mettais pas le script aurait continué et il nous aurait sorti le contenu de la page HTML.
Soumettez le formulaire et regardez ce qu'il se passe, magique non ?
Je trouve que mettre cette ligne à chaque fois qu'on veut rendre un message n'est pas propre, personnellement j'utilise toujours la POO, donc je me fais des fonctions qui me permettent d'avoir du code plus propre et moins bordélique.
On peut bien sûr faire une fonction sans utiliser la POO. Voici un exemple.
PHP:
function renderJson($index, $value){
return json_encode(array($index => $value));
}Pour utiliser la fonction il suffit mettre de faire :
PHP:
die(renderJson('response', 'Hello world !'));Attention ! Si vous mettez en premier paramètre de votre fonction quelque chose de différent du Js, le code affichera undefined.
Code:
die(renderJson('x', 'Hey')); # PHP
alert(x.test); // Js
// x doit être identique aux deux endroitsJe me suis peut-être mal exprimé, j'espère que ce petit bout de code ci-dessous vous fera comprendre.
Maintenant nous allons afficher le message sur notre page, en utilisant
jQuery.
Sous le formulaire créez une DIV avec l'ID de votre choix, et dans le JavaScript, puis dans le $.each, enlevez le alert() et mettez cette ligne.
Maintenant nous allons afficher le message sur notre page, en utilisant
jQuery.
Sous le formulaire créez une DIV avec l'ID de votre choix, et dans le JavaScript, puis dans le $.each, enlevez le alert() et mettez cette ligne.
Code:
$('#votreDiv').append(response.response);Vous devriez avoir ça comme rendu :
Ce n'est pas tout à fait ce que l'on voulait, pour "patcher" ça mettez là où vous définissez les variables en JavaScript ce petit bout de code qui va vider la DIV à chaque soumission du formulaire.
Code:
$('#response').html('');Et maintenant plus de problème !
Cela rend très bien sur les sites, c'est fluide et plus professionnel !
Et voilà
c'est la fin de ce tutoriel, si vous avez des questions n'hésitez pas à me MP ou à les poser dans les commentaires pour que d'autres personnes puissent vous répondre.
Cela rend très bien sur les sites, c'est fluide et plus professionnel !
Et voilà
c'est la fin de ce tutoriel, si vous avez des questions n'hésitez pas à me MP ou à les poser dans les commentaires pour que d'autres personnes puissent vous répondre.