PHPascal.com

PHPAscal rouge2 (Version bleu)


Programmation web CSS HTML PHP Jquery Javascript Wordpresse RSS SQL SSH, serveur linux Outils
  PHPascal a 144 articles


Recherche


cheap nike nfl jerseysWholesale cheap nfl jerseyscheap jerseys online from chinacheap nfl jerseys free shippingwholesale nba jerseysWholesale cheap nhl jerseyscheap nhl jerseys onlinecheap nba basketball jerseys

Valid HTML 5

Programmation web / Jquery / Ajax 101 avec Jquery

Ajax 101 avec Jquery, exemple complet et non intrusif

Voici le principe de ce code ajax qui fonctionne aussi sans javascript. 

  • L'appel du call Ajax ce fait a partir d'un lien html de base qui lui est rajouter du code Jquery pour faire l'appel du script AJAX avec des paramètres en POST.
  • Si aucun javascript dans le navigateur a ce moment on utilise le lien Ajax comme un lien standard et les paramêtre sont envoyé en GET.


Télécharger le code complet de l'exemple (89k)

Et oAjax image attenten utilise une image de loading pour indiquer au internaute que quelque chose se passe et d'attendre un peu. Vous pouvez créé votre propre image avec ce site: http://www.ajaxload.info/





Pour faire marcher le script ajax.php sans le javascript il suffit de rajouter le template de la page au résultat au lieu de juste retourné le résultat simple de la requête Ajax.

 

 

Voici le code principal :

<?php
if (!isset($result)) $result = '';
if (!isset($ok)) $ok = '';
?><!doctype html>
<html lang="us">
<head>
    <meta charset="utf-8">
    <title>jQuery Ajax 101</title>
    <script src="js/jquery-1.8.2.js"></script>
    <script>
    // attendre chargement du DOM avant de faire le js Jquery
    $(function() {
   
    $("#ajax1").click(function(){
       
        // afficher image de loading du script ajax
        $('#img_ajax_wait').show();

        // initialisation des valeurs de retour
        $('#result').html('');
        $('#ok').html('');

        // CALL ajax avec parametre page pour utilisé le même fichier ajax pour différente page du site
        $.ajax({
            url:'ajax.php',
            type:'POST',
            data: {
                page:'test',
                param1: $(this).attr('param1'),
                param2: $(this).attr('param2'),
                param3: $(this).attr('param3')
               
            },
            success:function( response){
                var resJson = jQuery.parseJSON(response);

                // si resultat OK
                if( resJson.statut == 'ok' )
                {
                    $('#ok').html('Ajax r&eacute;ussi');
                    console.debug('OK AJAX'); // juste pour les test a enlever en production
                }
                // si ERREUR
                else
                {
                    $('#ok').html('Erreur dans le fichier Ajax');
                    console.debug('Erreur AJAX'); // juste pour les test a enlever en production
               
                }

                // afficher resultat
                $('#result').html(resJson.resultat);

                // enelever image de chargement tout est fini
                $('#img_ajax_wait').hide();
               
            }
        });

       
        // enlever lien href
        return false;
    });


    // meme principe pour Ajax2 mais pas mis ici pour simuler si on a pas de Javascript dans le navigateur
    //$("#ajax2").click(function(){
 
    //});
   
       
    });
    </script>
   
</head>
<body>

<h1>jQuery Ajax test</h1>

<ul>
    <li><a href='ajax.php?page=test&param1=1&param2=2&param3=3' param1='1' param2='2' param3='3' id='ajax1'>Ajax test 1</a></li>
    <li><a href='ajax.php?page=test&param1=4&param2=5&param3=6' param1='4' param2='5' param3='6' id='ajax2'>Ajax test 2 exemple si JS desactiver</a></li>
</ul>

<h2>Ajax result:</h2>

<img src='ajax-loader.gif' style="display:none;" id='img_ajax_wait' alt='wait for ajax result'/>


<div id='ok'><?php print $ok; ?></div>
<div id="result"><?php print $result; ?></div>

</body>
</html>

 

Article écrit le 11 janvier 2013
Article modifié le 20 fvrier 2013

Autres articles sous la même catégorie


Pascal Dubreuil | © PHPascal.com 2017
Temps d'exécution : 0.0134 sec
Imprimer le 23 August 2017 - 21:00:29
par Pascal Dubreuil organisateur du Marathon de Laval