jQuery ou comment simplifier les requêtes Ajax

2 mars 2010 par blog.yann Laisser une réponse »

Avant il fallait jongler avec XMLHttpRequest, bien sûr ça fonctionne très bien, mais une fois qu’on a essayé jQuery difficile de faire machine arrière !
En effet ce simple code ci dessous permet d’envoyer la variable js info à page.php avec la méthode POST, pendant l’envoi et en attendant le retour de page.php, l’image load.gif est affichée dans le div chargement et enfin si tout s’est bien passé, retourPHP affiche ce que renvoi page.php.

Démo du script

$.ajax({
    type : "POST",
    url : "page.php",
    data : "info ="+info,
    send : $('#chargement').html("<img src="img/load.gif" alt="chargement" />"),
    error :function(msg){
        alert( "Erreur  : " + msg );
    },
    success : function(data){
    $('#retourPHP').html(data);
}});

Tout d’abord pour faire patienter l’internaute vous pouvez créer votre gif de chargement avec AjaxLoad

Mise en place du script :

D’abord insérez l’appel à jQuery

 <script src="http://code.jquery.com/jquery-latest.js"></script>

Ensuite on va créer un champ monChamp qui contiendra les données à envoyer, un bouton envoiAjax et une balise div retourPHP qui renverra la valeur saisie dans le champ

<input type="text" id="monChamp" />
<input type="button" value="Envoi" id="envoiAjax" />
<div id="retourPHP"></div>

Avec jQuery on surveille le click sur envoiAjax et on récupère le value de monChamp que l’on stocke dans la variable info (le reste est expliqué au début de l’article)

<script language='javascript'>
$(document).ready(function(){
    $("#envoiAjax").click(function () {
        var info = $("#monChamp").val();

            $.ajax({
                type : "POST",
                url : "page.php",
                data : "info="+info,
                send : $('#retourPHP').html("<img src='load.gif' alt='chargement' />"),
                error :function(msg){
                    alert( "Erreur  : " + msg );
                },
                success : function(data){
                $('#retourPHP').html(data);
            }});
    });
});
</script>

et page.php y’a quoi dedans ? pas pas grand chose on se contente d’afficher ce que l’on a reçu (sans vérification de contenu : ni isset, ni empty ni rien…)

<?php
    echo "reception de : " . $_POST['info'];
?>

et voilà !



ShareThis

Posté dans Developpement, Jquery, PHP, Web

Tags:

Vous pouvez suivre n'importe laquelle de ces entrées à travers le Flux RSS 2.0. Vous pouvez laisser une réponse , ou rétrolien à partir de votre propre site.

Publicité

3 commentaires

Ajouter votre commentaire
  1. antitaniom dit :
    2 décembre 2010 à

    Bonjour merci pour ce tuto…
    Une question bête, dans le champ error, msg correspond à quoi?
    Merci :)

  2. Souffle56 dit :
    7 février 2011 à

    Grand Merci à toi, Yann, pour ce tuto; c’est pile-exactement ce dont j’avais besoin pour aborder le thème de l’ajax via jquery. Et en plus, tu as vraiment « l’art du raccourci » pour faire comprendre les choses… Bonne continuation à toi !
    Dess

  3. Lorenzo dit :
    13 juillet 2011 à

    Merci pour ce tuto clair et précis! Je voulais savoir si tu savais comment remplir plusieurs div en même temps lors du click sur le bouton?

Laisser un commentaire