Récupérer les données d’une base de données sans actualiser le navigateur

Dans ce tutoriel nous allons découvrir comment récupérer les données d’une base de données sans actualiser le navigateur.
 
Soumettre un formulaire sans recharger la page en utilisant Ajax, jQuery et PHP

Étape 1: Créez un formulaire HTML pour charger les données

D’abord nous allons créer un simple formulaire pour récupérer les informations de l’utilisateur. Créez une page avec le nom index.html et collez-y le code ci-dessous.

<html>
	<head>
	    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
	<script type="text/javascript">
		//Mettez le code JQuery ici
	</script>
	</head>
	<body>
		<input type="text" name="name" id="name" onkeyup="getdata();">
		<div id="res">  </div>
	</body>
</html>

Lorsque l’utilisateur saisit le nom sur l’input, et clique sur la touche Entrée, l’événement onkeyup se produit en appelant la méthode getdata().
 

Étape 2: Récupérer les données avec Ajax/jQuery

Nous utiliserons la méthode AJAX pour récupérer les données sans actualiser la page.

function getdata()
{
	 var name = document.getElementById("name");
		
	 if(name)
	 {
		$.ajax({
			type: 'post',
			url: 'getdata.php',
			data: {
			   name:name,
			},
			success: function (response) {
			   $('#res').html(response);
			}
		});
	 }
	 else
	 {
		$('#res').html("Entrez le nom de l'utilisateur");
	 }
}

 
 

Étape 3: Se connecter à la base de données et récupérer les données

Dans cette étape, nous interrogeons la base de données et récupérons les résultats souhaités.

// Le fichier getdata.php

<?php
	if( isset( $_POST['name'] ) )
	{
		$name = $_POST['name'];

		mysql_connect('localhost', 'root', ' ');

		mysql_select_db('user');

		$data = " SELECT age FROM user WHERE name LIKE '$name%' ";

		$query = mysql_query($data);

		while($row = mysql_fetch_array($query))
		{
		   echo "<p>".$row['age']."</p>";
		}
	}
?>

Dans ce tutoriel nous avons vu comment récupérer les données d’une base de données sans actualiser le navigateur. Vous pouvez personnaliser davantage ce code selon vos besoins.
 
 
QCM sur PHP

5 réflexions sur “Récupérer les données d’une base de données sans actualiser le navigateur

  • décembre 8, 2020 à 2:13 pm
    Permalien

    Bonjour, Merci pour ce tuto !
    J’ai un petit souci avec la récupération du $_POST[‘cp’] dans le fichier getdata.php.
    Impossible d’afficher la valeur 🤯

    Répondre
    • décembre 15, 2020 à 2:18 pm
      Permalien

      Vérifier bien que les données sont bien envoyées via la requête ajax, la console du navigateur vous permet de voir sir l’appel AJAX est réussie.

      Répondre
    • novembre 13, 2023 à 9:41 pm
      Permalien

      OK dans le fichier.html

      Dans le fichier.php

      if(isset($_POST[‘env’])){
      //variables pour récupérer le contenu du formulaire
      $name=$_POST[‘env’];
      }

      Répondre
  • février 10, 2021 à 3:45 pm
    Permalien

    Bonjour,

    Chouette tutoriel mais quand l’id d’un l’objet radio ou checkbox n’est pas connu car récupéré d’une base à partir d’une requête et que l’on connait que le « name » comment fait-on?

    query($sql);

    if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
    ?>

    <input class="form-check-input" type="checkbox" name="checkbox[]" value=" » id= » »>
    <label for=" »>

    Répondre

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *