Introduction pour débutant à Jquery et Ajax


Je présente dans ce billet 3 courts morceaux de code qui permettront aux débutants de s’initier à la syntaxe de Jquery et Ajax. Les trois codes travail avec des événements simples comme des éléments de type « lien » ou des « formulaires » que je détail dans les commentaires. Le premier code déclenche un événement sur un clique d’un élément de type « lien ». Les deux autres codes utilise des formulaires, pour retranscrire un message dans une DIV sans rechargement de page, ou lors d’un submit de formulaire.

ajax jquery laintimes

Le premier code déclenche un window.alert() lors d’un clique (onclick) sur un élément de type « lien » (< a >), « a » désigne TOUT les éléments d’une page. Pour spécifier un identifiant de lien il faut le faire précéder de « # ».

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
        $("a").click(function(){//traite tout les éléments a de la page
        alert("Laintimes.com");
        });
});
</script>
<a href="#">Jquery et Ajax</a>

Dans ce morceaux de code on utilise un formulaire pour envoyer un message et lors de la soumission de celui-ci un window.alert viens signaler l’utilisateur. On utilise ici un « # » avant « test » pour signaler que l’on utilise un identifiant précis dans notre page. Ce sera l’élément ayant pour ID « test » (ici le form du dessous).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {//Attend le chargement complet de la page pour commencer le traitement
        $('#test').submit(function(){//Traite le bouton Submit via un "id" défini par un #
        alert("Laintimes");
        return false;//empeche le rechargement de page
        });
});
</script>
<form action="content_index.php" method="post" id="test">
<input type="text" value="trololo"></input>
<input type="submit" id="test" value="Envoyer"></input>
</form>

Dans ce code, on utilise encore un formulaire pour récupérer une chaine d’un utilisateur et on l’affiche dans une DIV sur la même page sans faire de rechargement complet.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready( function() {
    $("#formutest").submit(function () {//id de l'élément à traiter
            $.post("content_index.php",$("form").serialize(),function(texte){
                $("div#zoneTexte").append(texte);//id de la div ou va s'afficher le texte
            });
            return false; // ne change pas de page
    });
});
</script>

<form id="formutest" action="content_index.php" method="post">
<input type="text" id="text" name="text" value="trololo"></input>
<input type="submit" id="submit" value="Envoyer"></input>
</form>
<div id="zoneTexte"></div>

Une réflexion sur « Introduction pour débutant à Jquery et Ajax »

Laisser un commentaire