Appeler une page php avec jquery
Appeler une page php avec jquery
Dans ce tutoriel nous allons voir comment appeler une page php avec Jquery sans rafraichir la page.
Il peut s'avérer parfois utile d'appeler une page avec un simple lien afin qu'elle se charge dans un div. Ça permet tout simplement de gagner en vitesse de chargement (point fort pour le référencement) et d'avoir un site plus ergonomique.
Pour se faire, nous allons créer 2 pages.
- La page où l'on va placer le lien pour appeler la seconde page (index.php)
- La page à appeler (rand.php) qui contient seulement un générateur de nombres
index.php
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Loader page Ajax</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function charger_page() {
document.getElementById('attente').innerHTML = 'Merci de patienter ...';
$('#chargement').load('rand.php');
}
</script>
</head>
<body>
<div align="center">
<a href="#" onClick="charger_page();">Charger la page</a>
<div id="attente">en attente ...</div>
<div id="chargement"></div>
</div>
</body>
</html>
Comme vous pouvez le voir, sur cette page, on appel entre <head> et </head> la bibliothèque Jquery et on créé une fonction javascript qui sera appelée lors du clic sur le lien.
rand.php
<?php echo rand(0,9999); ?>
<script>document.getElementById('attente').innerHTML = ' ';</script>
Dans cette page, on met ce que l'on veux.
Jusqu'à là, dans cet exemple, nous avons vu un simple appel de page sans paramètres.
Maintenant nous allons voir comment récupérer des paramètres en POST afin de les transmettre dans la page à appeler.
Pour se faire, nous allons créer 2 pages.
- La page où l'on va placer le lien pour appeler la seconde page (index.php)
- La page à appeler (prenom.php) qui affichera le prénom défini dans la page index.php
Page index.php
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Loader page Ajax</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
$(document).on("click","#charger",function() {
$("#chargement").load("prenom.php", {
prenom : 'John Doe'
});
$.ajaxSetup({
cache: false
})
});
});
</script>
</head>
<body>
<div align="center">
<a href="#" id="charger" name="charger">Charger la page</a>
<div id="attente">en attente ...</div>
<div id="chargement"></div>
</div>
</body>
</html>
Page prenom.php
<?php echo $_POST['prenom']; ?>
<script>document.getElementById('attente').innerHTML = ' ';</script>
En espérant que ces petites lignes de code vont vous aider dans votre développement.
Si vous aussi vous avez des tutos pour charger des pages d'une autre manière, n'hésitez pas à partager.
Facebook Twitter Google+ Linkedin Mail Mots clés associés : Tutoriel Ajax, Tutoriel PHP
A propos de l'auteur : Jerome Mattone
Gérant de l'agence web JM Créa à Antibes, développeur php, mysql, css javascript et expert en référencement Google avancé.
Laisser un commentaire
Derniers articles
juillet 11, 2018
juin 29, 2018
mars 13, 2018
janvier 5, 2018
novembre 20, 2017
septembre 14, 2017
septembre 14, 2017
septembre 14, 2017
Contactez-nous
521 ch. du Puy
06600 Antibes
Par villes
Les derniers articles
juillet 11, 2018
juin 29, 2018
Suivez-nous sur Facebook
2 Comments
$(“#chargement”).load(“rand.php”, {
prenom : ‘John Doe’
});
BUT
$(“#chargement”).load(“prenom.php”, {
prenom : ‘John Doe’
});
Autant pour moi ! C’est corrigé, merci 🙂