Articles Taggés ‘Ajax’

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

[cc lang= »js » width=’100%’ line=’20’]
$.ajax({
type : « POST »,
url : « page.php »,
data : « info = »+info,
send : $(‘#chargement’).html(« « ),
error :function(msg){
alert( « Erreur :  » + msg );
},
success : function(data){
$(‘#retourPHP’).html(data);
}});
[/cc]

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
[cc lang= »js » width=’100%’]

[/cc]
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
[cc lang= »html » width=’100%’]

[/cc]
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)
[cc lang= »js » width=’100%’]

[/cc]

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…)

[cc lang= »php » width= »100% »]
< ?php echo "reception de : " . $_POST['info']; ?>
[/cc]
et voilà !