Demande d'explications sur Ajax simplifié avec jQuery

Toutes vos questions sur jQuery, CSS, HTML5, mise en page...
ph.gras
Addict
Addict
 
Messages: 71
Inscription: 23 Juin 2013, 13:39

Demande d'explications sur Ajax simplifié avec jQuery

Messagede ph.gras » 23 Juin 2013, 13:45

Dans le code jQuery de la page :
http://www.finalclap.com/tuto/cours-jquery-61/ajax-67/
Code: Tout sélectionner
jQuery(document).ready(function($){
    $('#form').submit(function(e){
        // On désactive le comportement par défaut du navigateur
        // (qui consiste à appeler la page action du formulaire)
        e.preventDefault();
         
        // On envoi la requête AJAX
        $.getJSON(
            'ch6_exemple1_ajax.php',
            {chaine: $('#chaine').val()},
            function(data){
                $('#retour').hide();
                $('#retour').html('')
                    .append('<b>Paramètre en majuscule</b> : '+data.chaine+'<br/>')
                    .append('<b>Date</b> : '+data.date+'<br/>')
                    .append('<b>Version PHP</b> : '+data.phpversion+'<br/>');
                $('#retour').fadeIn();
            }
        );
    });
});

Je ne comprends pas comment la requête jQuery est affectée à la fonction "e".

Avatar de l’utilisateur
Galdon
Administrateur du site
Administrateur du site
 
Messages: 2180
Inscription: 06 Sep 2008, 22:05

Re: Demande d'explications sur Ajax simplifié avec jQuery

Messagede Galdon » 24 Juin 2013, 09:46

ph.gras a écrit:Je ne comprends pas comment la requête jQuery est affectée à la fonction "e".

function(e) ne désigne pas une fonction qui s'appelle "e", mais une fonction anonyme qui prend en paramètre une variable e (e pour event, ou événement en français).

En l’occurrence c'est la fonction callback qui est attribuée à l'événement submit du formulaire, ça veut dire que cette fonction sera appelée lorsqu'on va valider le formulaire : soit en cliquant sur le bouton submit, soit en appuyant sur entrée dans un champ par exemple.

La variable e contient pas mal d'informations sur l'événement, dont on est pas obligé de se servir dans le corps de la fonction, mais par convention on nomme toujours cet argument au cas où on en ai besoin dans le code de la fonction, un jour.
"Si tu veux me parler, envoie-moi un... FAX !" - George Abitbol

ph.gras
Addict
Addict
 
Messages: 71
Inscription: 23 Juin 2013, 13:39

Re: Demande d'explications sur Ajax simplifié avec jQuery

Messagede ph.gras » 24 Juin 2013, 16:34

Galdon a écrit:
ph.gras a écrit:Je ne comprends pas comment la requête jQuery est affectée à la fonction "e".

function(e) ne désigne pas une fonction qui s'appelle "e", mais une fonction anonyme qui prend en paramètre une variable e (e pour event, ou événement en français).
C'est pour ça qu'on la retrouve dans :
Code: Tout sélectionner
e.preventDefault();
?

Galdon a écrit:En l’occurrence c'est la fonction callback qui est attribuée à l'événement submit du formulaire, ça veut dire que cette fonction sera appelée lorsqu'on va valider le formulaire : soit en cliquant sur le bouton submit, soit en appuyant sur entrée dans un champ par exemple.
D'accord, mais quel est le lien entre les 2 parties du script ?
Code: Tout sélectionner
e.preventDefault();
         
        // On envoie la requête AJAX
        $.getJSON(
Merci d'avance pour cette explication qui risque de s'étendre sur plusieurs messages…
Je comprends vite, mais il faut m'expliquer longuement :geek: !

Avatar de l’utilisateur
Galdon
Administrateur du site
Administrateur du site
 
Messages: 2180
Inscription: 06 Sep 2008, 22:05

Re: Demande d'explications sur Ajax simplifié avec jQuery

Messagede Galdon » 25 Juin 2013, 13:18

Pourquoi y aurait-il forcément un lien entre 2 lignes de code consécutive ?

preventDefault() est une fonction jQuery qui permet de désactiver le comportement par défaut, c'est à dire submit le formulaire dans le cas présent (ce qui recharge la page).

Or comme le but du code sert à envoyer un formulaire en AJAX, on ne veut pas de ce comportement par défaut.
"Si tu veux me parler, envoie-moi un... FAX !" - George Abitbol

ph.gras
Addict
Addict
 
Messages: 71
Inscription: 23 Juin 2013, 13:39

Re: Demande d'explications sur Ajax simplifié avec jQuery

Messagede ph.gras » 27 Juin 2013, 21:32

J'ai recopié le script, et rien ne se passe. Je vois que ça mouline en arrière plan,
parce que le navigateur affiche qu'une requête a été envoyée, mais la page n'est
pas affectée et l'affichage ne change pas.

J'ai vu que la version jQuery utilisée est 1.5.2, mais j'en suis encore à la 1.4.4…

Ça peut jouer ?

Au passage, j'ai observé que la fonction "e" avait bien été déclarée auparavant.

ph.gras
Addict
Addict
 
Messages: 71
Inscription: 23 Juin 2013, 13:39

Re: Demande d'explications sur Ajax simplifié avec jQuery

Messagede ph.gras » 29 Juin 2013, 15:54

Chouette ! J'ai enfin réussi à afficher un truc…

La console d'erreurs est un outil indispensable.


Retourner vers HTML / CSS / Javascript

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités