Comment utiliser AJAX avec PHP ?

Réponses rédigées par Antoine
Dernière mise à jour : 2017-10-12 17:28:09
Thèmes : php - ajax - jquery
Question

Comment utiliser AJAX pour exécuter un code PHP ?

Réponse

AJAX permet l’exécution de requêtes serveur PHP, en arrière plan, sans qu'elles aient pour effet le rafraichissement de la page courante.

On peut utiliser la méthode AJAX soit avec l'objet XMLHttpRequest, soit avec la libraire jQuery.

Un exemple Ajax avec jQuery : un utilisateur doit saisir un mot de passe, le mot de passe est alors vérifié coté serveur par un fichier PHP. Le résultat du fichier PHP est alors renvoyé de manière asynchrone au navigateur de l'utilisateur.

On peut imaginer un champ texte où il faut saisir un mot de passe.

Il faut la librairie jQuery, idéalement entre les balises <head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Ensuite le code HTML du formulaire

<input type="text" name="mdp" value="" id="mdp">
<button type="button" id="connexion">Connexion</button>
<div id="connexion_report"></div>

Puis le code jQuery :

<script>
function connexion(mdp){
$.ajax({
url : 'connexion.php',
type : 'GET', 
data : 'mdp=' + mdp, 
dataType : 'html',
success : function(reponse){
document.getElementById('connexion_report').innerHTML = reponse;},
});
}
$('#connexion').click( function(){
var mdp = document.getElementById("mdp").value;
connexion(mdp);
});
</script>

Quand l'utilisateur clique sur le bouton connexion, le code jQuery récupère la valeur du champs mot de passe et l'envoi de manière asynchrone au fichier PHP, qui s'exécute coté serveur, et dont le résultat est renvoyé à la page courante toujours de manière asynchrone.

<?php
if ((isset($_GET["mdp"])) && ($_GET["mdp"] != ""))
{
if (($_GET["mdp"]) == "test")
{
echo "C'est le bon mot de passe";
}
else
{
echo "Ce n'est pas le bon pour mot de passe";
}
}
else echo "Une erreur est survenue";
?>
Réponse

Si vous préférez utiliser Ajax sans avoir recours à la librairie jQuery, vous devez utiliser l'objet XMLHttpRequest comme expliqué sur cette autre question.