Récupérer et afficher des données d'une BDD

Résolu
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 - 18 oct. 2022 à 14:03
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 - 20 oct. 2022 à 09:07

Bonjour à tous,

J'aimerai récupérer des données clients stockées dans une bdd Mysql au clic sur un button pour les afficher ensuite dans des div (par exemple...) sans recharger la page !
J'essaie de m'aider de codes que j'utilise sur d'autres pages dans mon application qui remplissent des select ou qui font de l'autocompletion mais pour faire un truc simple comme ça je ne sais pas quelle fonction (ou instruction) utiliser !
Voici où j'en suis : 

<tbody>
	<?phpwhile ($data_client = $req_clients->
	fetch()){?>
	<tr id="id_<?php echo $data_client['id_client']; ?>" class="list-group-item">
		<td>
			<input type="button" name="client" class="stretched-link" onclick="listGroupActive(<?php echo $data_client['id_client']; ?>)">
		</td>
		<td class="list-group-item-figure">
			<div class="tile-circle bg-blue">
				<?phpecho substr($data_client['nom'], 0,1);?>
			</div>
		</td>
		<td class="list-group-item-body">
			<h4 class="list-group-item-title"><?php echo $data_client['nom'] . ' ' . $data_client['prenom'];?></h4>
			<p class="list-group-item-text">
				<?php echo $data_client['ville'];?>
			</p>
		</td>
	</tr>
	<?php}?>
</tbody>
</table>
// #################### ACTIVER FICHE CLIENT 1 AU CHARGEMENT ############################

// Récupération du n° du premier client : 
var numClientActif = "<?php echo $num_premier_client; ?>";
var clientActif = document.getElementById('id_' + numClientActif);
// Ajout de la class 'active' : 
clientActif.classList.add("active");

// #################### ACTIVER FICHE CLIENT AU CLIC ############################
function listGroupActive(arg) {
    var clientId = 'id_' + arg;
    // Suppression de la class 'active' de précédent client : 
    clientActif.classList.remove("active");
    // Attribution de la class 'active' au nouveau client : 
    clientActif = document.getElementById('id_' + arg);
    clientActif.classList.add("active");

    // Chargement de la fiche client qui vient d'être activé :
    $.ajax({
            type: "POST", //Méthode à employer POST ou GET 
            url: "client-data.php", //Cible du script coté serveur à appeler 
            data: 'id_client=' + clientId
        })
        .done// JE BLOQUE ICI !
}

client-data.php

<?php
require ("connexion.php");
if(!empty($_POST["id_client"])){ 

// Requête recherche fiche client : 
    $requete = $bdd->prepare('SELECT * FROM clients WHERE id_client = :id_client');
    $requete->execute(array(
        'id_client' => $_POST['id_client']
    ));


// on effectue une boucle pour obtenir les données 
    while($reponse = $requete->fetch()) {
        $idclient =$donnees['id_client'];
        if($donnees['prenom']<>''){
            $nom = $donnees['nom'] . ' ' . $donnees['prenom'];
        }
        else {
            $nom= $donnees['nom'];
        }
        $adresse = $donnees['adresse'];
        $cp = $donnees['cp'];
        $ville = $donnees['ville'];
        $telephone = sprintf("%s %s %s %s %s",
            substr($donnees['telephone'], 0, 2),
            substr($donnees['telephone'], 2, 2),
            substr($donnees['telephone'], 4, 2),
            substr($donnees['telephone'], 6, 2),
            substr($donnees['telephone'], 8, 2)
        );
        $email = $donnees['email'];

        $json[] = array(
            'nom' => $nom,
            'id' => $idclient,
            'adresse' => $adresse,
            'cp' => $cp,
            'ville' => $ville,
            'telephone' => $telephone,
            'email' => $email
        );
    }

// il n'y a plus qu'à convertir en JSON 
    echo json_encode($json);
}
?>

Merci d'avance pour votre aide !
Linux / Chrome 106.0.0.0

6 réponses

emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
Modifié le 20 oct. 2022 à 09:07

Résolu avec : 
 

 
alert(response[0].nom); 

Encore mille mercis à Jordan et Grandasse_

:-)

1
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
Modifié le 20 oct. 2022 à 08:23

Merci à Jordan et Grandasse_ pour cette solution : 

 

$.ajax({
    type:'POST',
    url:'client-data.php',
    data:{id_client:arg},
    dataType:"json",             
    success:function(response){
        console.log('success ajax',response);
        document.getElementById("nomclient").value = response[0].nom;
    },
    error:function(response){
        console.log('erreur ajax',response);
        alert("Erreur Ajax");                  
    }
});
1
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
20 oct. 2022 à 08:35

D'ailleurs dans la mesure où je n'affiche qu'un seul client par clic, je vais modifier mon PHP : 
$json[ ] = array(...  en $json = array(...

Du coup mon Javascript n'a plus besoin de tableau :
document.getElementById("nomclient").value = response.nom;

0
Grandasse_ Messages postés 913 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 30 janvier 2023 598
18 oct. 2022 à 15:23

Bonjour,

Je vois qu'il y a plusieurs méthodes dans la documentation pour utiliser la réponse de la requête, lesquelles as-tu testé ?

https://api.jquery.com/jquery.post/#jqxhr-object


0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
Modifié le 18 oct. 2022 à 19:25

Bonsoir,
Je ne sais pas trop ce que je teste vu que je ne comprends absolument pas la doc !
J'essaie d'adapter la méthode de l'autocomplétion qui fonctionne bien avec un input 'nomclient' qui une fois validé va rechercher dans la base de données les infos du client en question et rempli des inputs text adresse, cp, ville, etc...

Je m'inspire de ça : 

$('#nomclient').autocomplete({
    source: "clients-liste.php",
    minLength: 1,
    select: function (event, ui) {
        $("#nomclient").val(ui.item.label); 
        $("#idclient").val(ui.item.id);
        $("#adresse").val(ui.item.adresse);
        $("#cp").val(ui.item.cp);
        $("#ville").val(ui.item.ville);
        $("#telephone").val(ui.item.telephone);
        $("#email").val(ui.item.email);
    }                
});

car du côté serveur, j'essaie d'utiliser le remplissage d'un array de ce type : 

$json[] = array(
            'nom' => $nom,
            'id' => $idclient,
            'adresse' => $adresse,
            'cp' => $cp,
            'ville' => $ville,
            'telephone' => $telephone,
            'email' => $email
        );

J'ai donc fait ça : 

$.ajax({
    type:'POST'
    url:'client-data.php',
    data:'id_client=' + clientId,
    success:function () {
        $("#nomclient").val(nom); 
    }
});

Qui ne fonctionne pas (Uncaught ReferenceError: nom is not defined)

Ou ça : 

$.ajax({
    type:'POST'
    url:'client-data.php',
    data:'id_client=' + clientId,
    success:function(){
        document.getElementById("nomclient").value = nom;
    }
});

Idem

0
Grandasse_ Messages postés 913 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 30 janvier 2023 598 > emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023
18 oct. 2022 à 21:50

Lire une doc, ça s'apprend :D

Et là je pense que t'es pas loin. Tu as ce message d'erreur parce que la fonction que tu passes dans "success" ne sait pas d'où vient "nom".

J'imagine qu'un truc comme ça :

var getNomFromResult = function (result) {
  // TODO récupérer le nom dans le JSON "result"
}

$.ajax({
    type:'POST'
    url:'client-data.php',
    data:'id_client=' + clientId,
    success:function(result){
        document.getElementById("nomclient").value = getNomFromResult(result);
        // ou $("#nomclient").val(getNomFromResult(result)); 
    }
});

En tout cas, mets un point d'arrêt dans ta fonction success pour voir à quoi ressemblent les données, comme ça tu vas savoir vers où aller, ce qu'il te manque, etc...

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16 > Grandasse_ Messages postés 913 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 30 janvier 2023
18 oct. 2022 à 22:10

En même temps que Jordan ! :-)
Il propose (response) et toi (result) !
D'où vous sortez ces infos ? Je viens de faire un CTRL F sur la doc que tu m'as indiqué et je ne trouve ni l'un ni l'autre ?
On peut mettre le mot que l'on veut pour y stocker les résultats, comme une variable ?

0
jordane45 Messages postés 36951 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 février 2023 4 494 > emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023
18 oct. 2022 à 22:13

Oui

0
Grandasse_ Messages postés 913 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 30 janvier 2023 598 > emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023
19 oct. 2022 à 10:00

Je sors les informations de la documentation : 

"The success callback function is passed the returned data"

Donc il faut lui faire rentrer en input les données qui sont le résultat de ta requête

0
jordane45 Messages postés 36951 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 8 février 2023 4 494
Modifié le 18 oct. 2022 à 21:52

Bonjour,

$.ajax({
    type:'POST'
    url:'client-data.php',
    data:{id_client:clientId},
    dataType:"json",
    contentType: "application/json",
    success:function(response){
      console.log('success ajax',response);
      document.getElementById("nomclient").value = response.nom;
    },
    error:function(response){
      console.log('erreur ajax',response);
      alert("Erreur Ajax");
      
    }
});

.
Cordialement,
Jordane

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
Modifié le 19 oct. 2022 à 09:30

Bonjour Jordan...

J'ai momentanément retiré résolu à ma question pour 2 raisons : 
1. J'ai vu que tu avais modifié ton code à 21h52 et quand je l'utilise j'ai dans la console : 
    erreur ajax {readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}

  Alors qu'effectivement, j'ai lu dans un tuto ou dans la doc qu'il fallait bien mettre : 
  dataType:"json",
  contentType: "application/json",
  compte tenu de ma page php / json[]

2. Si j'utilise ton premier code posté, à savoir 
 

$.ajax({
    type:'POST',
    url:'client-data.php',
    data:'id_client=' + arg,                
    success:function(response){
        console.log('success ajax',response);
        /*document.getElementById("nomclient").value = response.nom;*/
        /*document.getElementById("nomclient").innerHTML = response.nom;*/
        $("#nomclient").val(response.nom); 
        alert(response.nom);                  
    },
    error:function(response){
        console.log('erreur ajax',response);
        alert("Erreur Ajax");                  
    }
});

J'ai bien en console les infos du client cliqué : 
success ajax [{"nom":"XXXXXX Alain","id":"12","adresse":"371 route de la pluie","cp":"12345","ville":"PARIS","telephone":"06 07 08 09 10","email":"test@orange.fr"}]

par contre comme tu peux le lire en lignes 7, 8, 9 je n'arrive pas à récupérer les infos, j'obtiens un "undefined" en alerte !

Une idée ?

PS : Tu as oublié une virgule en ligne 2 
PS2 : Compte tenu de mon code JavaScript qui précède j'utilise data:'id_client=' + arg, plutôt que 
          
data:'id_client=' + clientId,

0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
18 oct. 2022 à 21:57

Bonsoir Jordane,

C'est donc "response" qu'il faut utiliser pour espérer récupérer qqchose de la BDD!
J'ai ajouter une virgule en ligne 2 car j'avais une erreur (Unexpected identifier 'url')...

Maintenant la console indique : 
success ajax <br />
<b>Notice</b>:  Undefined variable: json in <b>/var/www/html/gestion2/client-data.php</b> on line <b>45</b><br />
null

Le problème vient de mon code PHP je suppose : 
 

<?php
require ("connexion.php");
if(!empty($_POST["id_client"])){ 

// Requête recherche fiche client : 
    $requete = $bdd->prepare('SELECT * FROM clients WHERE id_client = :id_client');
    $requete->execute(array(
        'id_client' => $_POST['id_client']
    ));


// on effectue une boucle pour obtenir les données 
    while($reponse = $requete->fetch()) {
        $idclient =$donnees['id_client'];
        if($donnees['prenom']<>''){
            $nom = $donnees['nom'] . ' ' . $donnees['prenom'];
        }
        else {
            $nom= $donnees['nom'];
        }
        $adresse = $donnees['adresse'];
        $cp = $donnees['cp'];
        $ville = $donnees['ville'];
        $telephone = sprintf("%s %s %s %s %s",
            substr($donnees['telephone'], 0, 2),
            substr($donnees['telephone'], 2, 2),
            substr($donnees['telephone'], 4, 2),
            substr($donnees['telephone'], 6, 2),
            substr($donnees['telephone'], 8, 2)
        );
        $email = $donnees['email'];

        $json[] = array(
            'nom' => $nom,
            'id' => $idclient,
            'adresse' => $adresse,
            'cp' => $cp,
            'ville' => $ville,
            'telephone' => $telephone,
            'email' => $email
        );
    }

// il n'y a plus qu'à convertir en JSON 
    echo json_encode($json);
}
?>
0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
18 oct. 2022 à 23:05

L'erreur venait de $reponse dans ma boucle while... Il fallait mettre $donnes !
J'vais aller reprendre un p'tit café moi !


Merci à vous deux pour votre aide !!!

:-)

0
Grandasse_ Messages postés 913 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 30 janvier 2023 598
19 oct. 2022 à 10:01

Pense à mettre le sujet en résolu !

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16 > Grandasse_ Messages postés 913 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 30 janvier 2023
Modifié le 19 oct. 2022 à 10:27

Je l'avais mis en résolu mais compte tenu de mon message de 9h30 (post9), le problème n'est qu'à moitié résolu !

:-(

0
Grandasse_ Messages postés 913 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 30 janvier 2023 598 > emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023
19 oct. 2022 à 22:24

Ah oui, en effet !

Alors on dirait que tu as bien toutes tes infos d'après le console.log :

success ajax [{"nom":"XXXXXX Alain","id":"12","adresse":"371 route de la pluie",
"cp":"12345","ville":"PARIS","telephone":"06 07 08 09 10","email":"test@orange.fr"}]

Par contre vu l'affichage, on dirait que ton objet est dans un tableau.

Essaie donc :

alert(response[0].nom); 

Tu comprends l'idée ?

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16 > Grandasse_ Messages postés 913 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 30 janvier 2023
19 oct. 2022 à 23:40

C'était effectivement une bonne idée, hélas j'ai toujours le même message d'erreur alerte undefined

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16 > Grandasse_ Messages postés 913 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 30 janvier 2023
Modifié le 19 oct. 2022 à 23:47

Et un truc comme ça :
 

$.ajax({
                type:'POST',
                url:'client-data.php',
                data:'id_client=' + arg,                
                success:function(response){
                    console.log('success ajax',response);
                    /*document.getElementById("nomclient").value = response.nom;*/
                    /*document.getElementById("nomclient").innerHTML = response.nom;*/
                    $("#nomclient").val(response.nom); 
                    $.each(response, function(i, item) {
                        $("#nomclient").val(i.item.nom);
                    });

                },
                error:function(response){
                  console.log('erreur ajax',response);
                  alert("Erreur Ajax");                  
                }
            });

Erreur : jquery.min.js:2 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in [{"nom":....

https://stackoverflow.com/questions/50419183/how-to-display-json-data-with-jquery-ajax

0