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 PHPSoumettre un formulaire sans recharger la page en utilisant Ajax, jQuery et PHPDans ce tutoriel nous allons découvrir comment soumettre un formulaire sans recharger la page en utilisant Ajax, jQuery et PHP. On constate que, lorsque nous…Lire plus

É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 PHPQCM sur PHP – Les bases – Partie 1QCM sur PHP avec des réponses pour la préparation des entretiens d’embauche, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus QCM jQueryQCM jQuery – Partie 1QCM sur jQuery avec des réponses pour la préparation des test techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus

Partagez cet article

Laisser un commentaire

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