1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| "use strict";
$(document).ready(function(){
//au clic sur le boutton submit, envoi des données du formulaire vers le server et récupère les messages renvoyé par le server.
$('#formiban').on('submit', function(e){
e.preventDefault();//evite le comportement par defaut, l'envoi du formulaire.
//cache les messages d'alert précédent lors de l'envoi du formulaire et je met un text vide
$('.alert').text('').hide().stop();//stop annule l'annimation et un comportement bizzare si je clic plusieurs fois sur le boutton.
var url = $(this).attr('action');//renvoi vers le fichier qui est dans le action du formulaire
var method = $(this).attr('method');//même chose pour la method du formulaire
var data = $(this).serialize();//je récupère les données du formulaire grace à serialize, elles seront déjà formatée
//console.log(data);
$.ajax({
url: url,
type: method,
data: data,//données envoyées au server
dataType: 'json',//type de donnée en retour du server
success: function(response){//en cas de succès, je prends la réponse du server
console.log(response);
if(response.success){
//affiche avec un slide vers le bas, la div avec le message de succès avec un délais de 2 sec
$('#successmessage').text(response.success).slideDown().delay(3000).slideUp();
$('form').get(0).reset();//réinitialise le formulaire.
}
if(response.errors){
var errorString = '';//je stock les erreurs dans une variable
//je boucle dans le tableau d'erreur renvoyé par le server
$.each(response.errors, function(key, value){
errorString += '<p>'+value+'</p>';//et je mets les erreur dans ma variable
});
//affiche avec un slide vers le bas, la div avec les messages d'erreurs avec un délais de 2 sec
$('#errormessage').html(errorString).slideDown().delay(3000).slideUp();
//.html à la différence de .text va interpreter les balise <p> ci-dessus
}
},
error: function(message) {//en cas d'erreur renvoyée par le server, hors erreur dans les champs du formulaire, ex: erreur de syntax
console.log(message);
}
});
});
}); |
Tuto utilisation PHP avec jQuery(ajax) échange de données entre ces deux langages
Répondre avec citation
Envoyé par grunk
Partager