Demande d'explications sur Ajax simplifié avec jQuery

[ph.gras]

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".

[Galdon]

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.

[ph.gras]

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();

?

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 !

[Galdon]

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.

[ph.gras]

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]

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

La console d'erreurs est un outil indispensable.