par

Comment je fais avec la méthode AJAX pour exécuter un code PHP pour traiter un formulaire et renvoyer le résultat sur la page courante sans devoir la recharger ?

1 Réponse

+1 vote
par

AJAX permet en effet l’exécution de requêtes serveur 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 JQUERY.

Un exemple 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 JS

<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 clic sur le bouton connexion le code JS 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";
?>
par

Et pour être sure d'utiliser la dernière version de Jquery rendez vous sur https://developers.google.com/speed/libraries/#jquery

Tendances

Questions liées

2 réponses
1 réponse
1 réponse
posée par anonyme 06-Octobre-2018
1 réponse

Merci pour votre visite sur 1FORMATIK.com

Un petit clic sur la pub est toujours apprécié, c'est elle qui finance le site

Bon surf

...