Titre

Faire appel à une page PHP en Ajax avec jQuery

Exécuter et afficher dynamiquement le contenu d'un fichier php sur une page Web via Jquery

Pour faire du jQuery il faut commencer par déclarer les scripts Jquery dans votre page. On fait cela au début dans le Head :

Ensuite il faudra déclarer un formulaire. Ici on le déclare en PHP.
Le formulaire se nomme ici FormMonFormulaire01

On déclarera une balise DIV qui contiendra ce qui est retournée par la page appelée en ajax

Il faudra aussi que l'on puisse appeler une fonction Jquery à loisir.
Pour cela on va créer un bouton avec un id. Ici l'id est butFonctionAjax

Au début de notre page on déclarera notre code Jquery.
Dans se code on fera référence à l'ID du bouton et on s'intéressera à son événement click. Quand on cliquera sur le bouton on déclenchera une fonction

Dans cette fonction, avec une première façon de faire, on va créer un objet qui représente notre formulaire. Puis via cet objet on va appeler la méthode serialize, cad que l'on va faire tenir le contenu de notre formulaire sur une seule ligne. Cette ligne sera stockée dans une variable nommée str

Puis on va faire appel à la fonction ajax de Jquery. Dans le paramètre data on passera notre variable str qui contient notre formulaire.

On indiquera également la méthode que l'on va utiliser, ici POST
On indiquera le nom/l'adresse de la page web que l'on va appeler, ici AjaxTemplate02.php

On fera appel à une fonction différente suivant que la fonction ajax réussisse ou non.

Dans la fonction appelée en cas de réussite, on récupérera la réponse envoyée par la fonction ajax de Jquery et on l'affichera dans le contenu d'une balise DIV.

Le code complet est donné ci-dessous. Il est en deux partie :
une partie pour un fichier qu'il faudra nommer AjaxTemplate01.php
une seconde qu'il faudra nommer AjaxTemplate02.php

Le code ci-dessous correspond à ce qu'il faut mettre dans le fichier AjaxTemplate01.php

Lien vers le fichier : cliquez ici

Et voici le contenu à mettre dans le fichier AjaxTemplate02.php

Lien vers le fichier : cliquez ici

Précédemment via la fonction ajax de jquery, on a posté le contenu complet d'un formulaire situé sur la page source à une seconde page PHP. Mais on peut envoyer la valeur de différents champs du formulaire source.

Ci-dessous le code de remplacement à mettre dans AjaxTemplate01.php :

Lien vers le fichier : cliquez ici