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.
É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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <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.
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 🤯
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.
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’];
}
* $_POST[‘name’]
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=" »>