contact@jm-crea.com
521 ch. du Puy, 06600 Antibes
Fixe : 09 80 36 03 01 Mobile : 06 61 86 58 07
JM Créa

0

was successfully added to your cart.

  • Accueil
  • Site Internet
    • Site vitrine
    • Site catalogue
    • Site E-commerce
    • Site one page
    • Par secteurs d’activité
    • Dépannage site Internet
  • Référencement
    • Référencement naturel
    • Référencement Google Ads
  • Webmarketing
    • Campagne SMS marketing
    • Création de logo
    • Identité visuelle
    • Facebook ADS
    • Maintenance de sites Internet
    • Inbound Marketing
    • Imprimerie
    • Intégration HTML
    • Création de logiciel
  • Réalisations
  • Outils
  • Shop
    • Plugins WordPress
    • PHP scripts
  • Blog
  • Contact
JM Créa
  • Accueil
  • Site Internet
    • Site vitrine
    • Site catalogue
    • Site E-commerce
    • Site one page
    • Par secteurs d’activité
    • Dépannage site Internet
  • Référencement
    • Référencement naturel
    • Référencement Google Ads
  • Webmarketing
    • Campagne SMS marketing
    • Création de logo
    • Identité visuelle
    • Facebook ADS
    • Maintenance de sites Internet
    • Inbound Marketing
    • Imprimerie
    • Intégration HTML
    • Création de logiciel
  • Réalisations
  • Outils
  • Shop
    • Plugins WordPress
    • PHP scripts
  • Blog
  • Contact
contact@jm-crea.com
521 ch. du Puy, 06600 Antibes
Fixe : 09 80 36 03 01 Mobile : 06 61 86 58 07

0

was successfully added to your cart.

Appeler une page php avec jquery sans refresh

HomeTuroriels Appeler une page php avec jquery sans refresh
by JM Créa 18 juin 2021 in  Turoriels Tuto HTML Tuto Javascript Tuto Jquery Tuto JS 0

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.

 

Appeler une page sans paramètres

Pour se faire, nous allons créer 2 pages.

  1. La page où l’on va placer le lien pour appeler la seconde page (index.php)
  2. 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>Charger page avec Jquery by JM Créa | www.jm-crea.com</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.

 

Appeler une page avec paramètres POST

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 ce faire, nous allons créer 2 pages.

  1. La page où l’on va placer le lien pour appeler la seconde page (index.php)
  2. La page à appeler (prenom.php) qui affichera le prénom défini dans la page index.php

 

index.php

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Charger page avec Jquery by JM Créa | www.jm-crea.com</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>

 

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.

4
0
Previous Post

Covid-19 et Google Ads ne font pas bon ménage

Covid19 Google Ads

Webmarketing

Next Post

Comment publier sur Instagram depuis un ordinateur

Turoriels

Publier un commentaire Annuler la réponse

Rechercher un article

Catégories

  • Actualités
  • Référencement
  • Turoriels
  • Webmarketing

Outils

  • Générateur de QR Code
  • Générateur de mot de passe
  • Générateur DKIM
  • Localiser une adresse IP
  • RBL Check
  • SPF check

Les derniers articles

Est-ce que l’UX est pris en compte par l’algorithme de Google ?

15 novembre 2022

Comment faire un post qui convertit ?

30 octobre 2022

Combien coûte un site Internet ?

18 octobre 2022

Générateur de backlinks, faut-il les utiliser ?

10 octobre 2022

Comment créer un shortcode avec WordPress ?

30 septembre 2022

Comment trouver de nouveaux clients lorsque l’on est indépendant ?

21 juillet 2022

Plugin WordPress captcha contact Form 7

17 juin 2022

Images libres de droits gratuites, où en trouver ?

5 mai 2022

Comment être premier sur Google ?

19 janvier 2022

Qu’est-ce qu’un sitemap XML et comment le mettre en place sur son site ?

4 janvier 2022

Coordonnées

09 80 36 03 01
contact@jm-crea.com
521 chemin du Puy, 06600 Antibes
09:00h - 16:30h

Zones géographiques

  • Création site Internet Sophia Antipolis
  • Création site Internet Nice
  • Création site Internet Cannes
  • Création site Internet Villeneuve-Loubet
  • Création site Internet Monaco
  • Création site Internet Mougins

Derniers articles

Est-ce que l’UX est pris en compte par l’algorithme de Google ?

15 novembre 2022

Comment faire un post qui convertit ?

30 octobre 2022

Combien coûte un site Internet ?

18 octobre 2022

Mentions légales | Agence web JM Créa