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 o
n 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é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¶m1=1¶m2=2¶m3=3' param1='1' param2='2' param3='3' id='ajax1'>Ajax test 1</a></li>
<li><a href='ajax.php?page=test¶m1=4¶m2=5¶m3=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>