Appel ajax pour lire une table Mysql

Bonjour,

Dans un programme PHP, je veux afficher des noms dans des boites (<div> id=.. <p>NOM..</p> </div>) et je conserve dans un tableau le code de ceux ci afin d'aller rechercher dans une table Mysql tous les renseignements les concernant (prénom, adresses, ...)

En cliquant sur un nom (le div correspondant avec un id=.. pour le repérer), je souhaiterais afficher tous les renseignements concernant ce nom dans une fenêtre popup ou modale.

Je pense que ce serait possible avec Jquery et Ajax, mais en parcourant les forums, je trouve des exemples d'appel à la fonction $.ajax avec différents paramètres, mais je n'ai toujours pas trouvé la solution à ce que je cherche, et comme je découvre Jquery et Ajax, je ne vois pas comment faire.

Je suppose qu'il faut un appel à la fonction $.ajax dans mon script principal et un autre script appelé par ajax où on va chercher les renseignements dans la table Mysql.

Pouvez vous m'aider et me montrer le code à écrire dans l'appel de l'ajax avec un click sur div, la fonction $.ajax avec ses paramètres et le script qu'appelle ajax où on va chercher les renseignements dans la table Mysql ??

Merci beaucoup de vos réponses.

Bonjour,
sur le onclick de la DIV, tu récupères les infos nécessaires et tu les formates pour envoi :fleche: jQuery.ajax()

Coté serveur tu récupères dans ta base les infos liées que tu retournes à l'appelant au format qui te convient le mieux.

De retour il te suffit de mettre ces infos, formatées ou non, dans le bon conteneur.

Tu peux également regarder du coté de .load().

Merci de la réponse, mais je ne vois pas comment faire avec ces explications, un petit exemple de code, pour un débutant, serait le bienvenu, merci.

:faq: http://javascript.developpez.com/faq...ax#AjaxRequest

Voir les tutoriels JS et PHP.

Bonjour,
Merci de la réponse mais cette FAQ ne m'a rien apporté,
Donnez un bout de code à un débutant, soyez sympa, merci beaucoup.
:)

Nous ne sommes pas là pour faire le boulot à ta place.
Les indications données-ci dessus sont amplement suffisantes et contiennent toutes les indications nécessaires pour le réalisation de ce que tu souhaites faire.
Commence à coder en suivant la FAQ ou les tutos et reviens nous poser des questions sur ce que tu n'as pas compris.

Je ne demande pas de me faire mon boulot, je demande simplement des départs pour pouvoir avancer.
Dans mon code php de départ, j'aimerais savoir quoi mettre dedans pour pour appeler la fonction $.ajax, dans cette fonction, je pense qu'il faut appeler le script qui lira ma table Mysql avec les paramètres en data, mais comment renvoyer dans ce script appelé les données de ma table et les récupérer dans mon script de départ ??
Voilà ce que je demande, est ce trop demandé d'aider un débutant ?
Merci beaucoup.

L'aide a été apportée en donnant les liens vers le FAQ
Tu as un bon point de départ...

Je pensais trouver un peu plus d'aide pour un débutant dans la communauté informatique, je me trompe.
Sympa les mecs

L'aide se trouve dans les tutos et la FAQ ...
Commence pas là, si tu bloques reviens poser des questions précises sur ce que tu ne comprends pas.
Tous les autres sont passés par les tutos et la FAQ, un peu de courage mets le nez dedans, tu verras que ce n'est pas si compliqué quand on veut bien se donner la peine de faire un petit effort au lie d'attendre que le autres fasse le travail à ta place, et cela n'en sera que plus gratifiant .

Bonjour,

Voilà les bouts de code qui affichent les boites de noms avec le script Ajax :

Affiche_liste_nom.php

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<script src="js/jquery.js"></script> <script> $(function() { $('#nom1').click(function() { $.ajax({ type: "POST", url: "Ajax_rech_nom.php", data: "id_nom=????", success: function(retour){ alert( "Renseignements : " + retour ); } }); }); }); </script>

---

extrait du script php qui affiche mes boites de nom :

Code:

---

1 2 3 4 5 6 7 8 9 10

print("<div class=\"cadre_nom\">"); $indi = 0; $id_nom = $infos[$indi]["id_nom"]; $nom = $infos[$indi]["nom"]; print("<span id=\"nom1\">$nom</span>"); ... $indi = 7; $id_nom = $infos[$indi]["id_nom"]; $nom = $infos[$indi]["nom"]; print("<span id=\"nom7\">$nom</span>");

---

Script php appelé par Ajax pour récupérer mes rensignements :

Ajax_rech_nom.php

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

if(isset($_POST["id_nom"])){   $serveur_bd = '127.0.0.1'; $utilisateur_bd = 'root'; $mdp_utilisateur_bd = ''; $nom_bd = 'Base_Perso';   $connect = mysql_connect($serveur_bd, $utilisateur_bd, $mdp_utilisateur_bd) or die('Erreur de connexion : '.mysql_error()); mysql_select_db($gst_nom_bd) or die('Erreur de base : '.mysql_error()); $res = mysql_query("SELECT id_nom, nom, prenom, adresse, ville, dep FROM Individus WHERE id_nom=".$_POST["id_nom"]); $row = mysql_fetch_row($res); echo "$row["nom"]; echo "$row["prenom"]; echo "$row["adresse"]; echo "$row["ville"]; echo "$row["dep"]; }

---

Mon div est un conteneur qui comporte un cadre pour afficher un nom à l'intérieur.

Je ne suis pas très sûr du code <span id=nom1> pour appeler ajax ??

Je ne sais pas comment indiquer la valeur de mon id_nom à data: "id_nom=????"

Et comment afficher tous les renseignements du retour dans la fenêtre alert, retour est un tableau ?

Et je vous parle pas d'une fenêtre modale à la place d'alert pour afficher ces renseignements, là c'est le flou total !!

Voilà ce que je n'arrive pas à comprendre, maintenant pouvez vous m'aider ??
Merci d'avance

PS je fais du php depuis 6 mois et découvre juste jquery et ajax depuis que je suis à la retraite.

La coloration syntaxique devrait te mettre su la piste de quelques erreurs de syntaxes...

Pour ce qui est du fonctionnement de ajax php et js, pour vulgariser un peu la chose:

Considère que php est un machine à écrire du code htm/css/js , que une fois que le php à rédigé le code il l'envoie vers le client pour qu'il soit interprété par le navigateur
php n'existe plus coté client
et coté serveur js n'est pas reconnu.

Une fois la page interprété par le navigateur du client pour retourner chercher des info sur le serveur sans recharger la page tu utilises ajax.
Considères ajax comme un coursier en triporteur qui va aller faire un aller retour vers le serveur avec une liste de courses...

Code:

---

1 2 3

type: "POST", url: "Ajax_rech_nom.php", data: "id_nom=????",

---

là tu envoies le coursier faire ses courses sur la page Ajax_rech_nom.php en methode POST avec comme liuste de courses ce qu'il y a dans data...

Sur la page de traitement Ajax_rech_nom.php tu récupères la liste de course dans $_POST tu effectues les traitement souhaités
le coursier repartira avec dasn son triporteur tout ce que tu auras fait comme echo (ou print :() sur ta page de traitement qui sera récupéré dans ta variable retour sur le success...

Merci, mais je ne sais toujours pas sous quelle forme mettre ma valeur id_nom dans le data: "id_nom=????" , elle arrive de $id_nom, mais comment arrive t elle dans data: ??
et comment gérer la variable retour, est ce bien un tableau ? dans ce cas on vois les résultats dans retour [0], [1], etc ..
Mais mis à part les quelques erreurs de syntaxes, est ce la trame est la bonne ?
Merci des réponses

Ben a vrai dire nous non plus on ne sait pas comment elle va y arriver, vu qu'on ne sait pas d'où elle doit venir ...

Bon laissez tomber, aucune piste pour avancer avec ce que je vous ai posté, je vois que je n'obtiendrais aucune aide de vous.
Bonne journée :cry:

heu ... ??? 8O8O8O8O

Code:

---

data: "id_nom=????",

---

c'est de ma faute si tu ne nous dis pas d'où est supposé provenir ce fameux id_nom que tu essaye de passer au serveur ???
une saisie ?
par télépathie ?
par paquet poste des 3 helvètes ?

Comment veux tu que l'on devine ?
je en vois aucun champs de saisie dans ton code ....

Donc, au lieu de pleurnicher après une aide que l'on ne peut pas te fournir ... donne nous les éléments qui nous permettront de te diriger vers une solution ... :roll:

Je ne pleurniche pas sur mon sort, je demande simplement une aide car je suis DEBUTANT et je découvre jquery et ajax et quand on débute tout seul à 65 ans, ce n'est pas évident car on trouve sur les forums tout un un tas de solutions qui ne marchent pas, j'ai appris php plus facilement que jquery et ajax qui sont pour moi des méthodes plus compliquées à comprendre..

Alors ce que je demandais c'est d'abord si ma démarche des codes envoyés étaient à peu près correct et dans le sens de la réalisation que je souhaite et surtout le placement de ce paramètre id_nom.

Je l'initialise dans ma variable $id_nom dans mon prog php, mais je ne sais pas comment et ou la passer à data: "id_nom=

Où faut il mettre la valeur de cette variable $id_nom dans mon prog afin que que je puisse l'affecter à data: "id_nom= dans ajax ??

Voilà pour moi c'est tout simple comme question et c'est sa réponse que j'attends,
et aussi si la variable retour de success: function(retour) est bien un tableau que l'on peut afficher retour [0], [1], etc ..dans la fonction alert.

Voilà si vous voulez pas m'aider tant pis, je trouverais bien une autre âme charitable qui me donnera la solution un jour ou l'autre, je suis pas pressé, étant à la retraite je programme pour mon plaisir.

Maintenant si vous voulez bien m'aider je recevrais la solution avec plaisir.
Merci d'avance.

Je suis moi aussi débutant en ajax/jquery mais je remarque un truc...
Tu dis au début que tu as des boites de nom dans un div et, je cite : "En cliquant sur un nom (le div correspondant avec un id=.. pour le repérer)"
Mais dans ton code on ne vois nul part cette action de click !
En javascript tout court, il faudrait un "onclick" sur chaque div et associer à ce "onclick" une fonction javascript qui va remplir le champ data que tu veux envoyer. Comme c'est de l'ajax, je ne sais pas trop si on peut faire comme ça !
Sinon dans jquery tu as une fonction qui te permet de récupérer tout tes div lors d'un click : sur cette page

Code:

---

1 2 3 4 5 6

$("#reset").click( function() { $("form").each( function() { this.reset(); }); }

---

Pour sélectionner ton/tes div, il y a plus haut la syntaxe à utiliser :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

// La notation [a|b] signifie que l'on applique le filtre a ou le filtre b.   $('div:first') // Sélectionne le premier élément <div>.   $('div:last') // Sélectionne le dernier élément <div>.   $('div:not(.ok)') // Sélectionne les <div> n'ayant pas la classe "ok".   $('div:[even|odd]') // Sélectionne les éléments <div> de rang [pair|impair] (le premier rang est 0).   $('div:[eq|lt|gt](n)')// Sélectionne le ou les éléments <div> de rang [égal|inférieur|supérieur] à n.   $(':header') // Sélectionne les éléments <hn>.   $(':animated') // Sélectionne les éléments actuellement animés.   $("div:contains('dvp')") // Sélectionne les éléments <div> contenant le texte "dvp" (sensible à la casse !)   $('div:empty') // Sélectionne les éléments <div> vides.   $('div:has(p)') // Sélectionne les éléments <div> ayant un descendant <p>.   $('div:parent') // Sélectionne les éléments <div> ayant des enfants (y compris les noeuds texte).   $('div:nth-child([n|even|odd|equation])') // Les enfants de <div> [de rang n|pairs|impairs|résultat de].   $('div:[first-child|last-child]') // Les éléments [premier|dernier] enfants d'un élément <div>.   $('div:only-child') // Les éléments qui sont les seuls enfants d'un élément <div>.

---

Tu devrais d'abord explorer cette piste.

Commençons par le l'envoi des données en ajax
Sens client => serveur

pour le passage des datas il y a différentes possibilités

passer un string de ce type :

Code:

---

data: "param1=valeur1&param2=valeurdeux"

---

passer directement un json

Code:

---

data {"param1":"valuer1","param2":"valeurdeux"}

---

tu recupères coté serveur selon la methos post ou get :

$_POST['param1'] , $_POST['param1']ou
$_GET['param1'] , $_GET['param1']
Pour le retour, comme sus dit, tu recupères initialement dans le succes ce que la page php a rédigé, c'est a dire à la base un string ...
Mais ...
SI tu as précisé dans ton ajax un dataType, le retour sera interpété au format du dataType indiqué
par exemple si tu précises dataType="json"
et que ton php redige un string json de ce type:

Code:

---

{"reponse1":"valeur de la réponse 1","reponse2":"valeur de la réponse 2"}

---

lors du success, la chaine reçue sera automatiquement évaluée en objet
json
Ainsi tu pourras directement exploiter la réponse de cette façon:

Code:

---

1 2 3 4

success: function(retour){ alert( retour.reponse1 ); alert( retour.reponse2 ); }

---

Citation:

---

Envoyé par SpaceFrog

Commençons par le l'envoi des données en ajax
Sens client => serveur

pour le passage des datas il y a différentes possibilités

passer un string de ce type :

Code:

---

data: "param1=valeur1&param2=valeurdeux"

---

passer directement un json

Code:

---

data {"param1":"valuer1","param2":"valeurdeux"}

---

---

C'est un peu ça le problème je pense, COMMENT renseigner param1/valeur1-param2/valeur2 etc...dans le code !
Tout ce que tu décris ensuite, je pense qu'il a compris...
Une partie de la réponse dans mon post précédent...

Sans doute ...
mais si il ne répond pas aux questions posées ...

Citation:

---

c'est de ma faute si tu ne nous dis pas d'où est supposé provenir ce fameux id_nom que tu essaye de passer au serveur ???
une saisie ?
par télépathie ?
par paquet poste des 3 helvètes ?

---

En fait, il a dit

Citation:

---

"id_nom=????" , elle arrive de $id_nom, mais comment arrive t elle dans data: ??

---

Donc je me demande si la variable ne vient pas de PHP : s'il n'essaye pas de mettre une donnée déjà stockée dans une variable côté serveur dans une requête AJAX côté cliente visant une autre page PHP.

Ceci dit je n'en vois pas l’intérêt ! Mais peut-être la confusion se situe t-elle à ce niveau.

$id_nom est une variable php donc ...

Comme sus dit ... considère php comme une machine à rédiger ton code html / js ...

Code:

---

data: {"id_nom":"<?echo $id_nom; ?>"}

---

ainsi si coté php ta variable $id_nom contient "Emile DUBOUDIN"
le code je généré sera:

Code:

---

data: {"id_nom":"Emile DUBOUDIN"}

---

Ceci dit, si on s'écarte du "comment faire pour répondre exactement à ta question", on peut prendre du recul et se demander quel est l’intérêt de renvoyer par Ajax une donnée déjà possédée server-side et qui ne sera visiblement pas modifiée client-site puisqu'insérée directement dans la requête.

Ouah, çà c'est de l’explication, merci beaucoup, et là j'ai bien compris l'arrivée des données dans ajax et la manière de les récupérer.

Mais désolé si je me rabâche, je n'arrive pas à situer où mettre la valeur de mon id_nom dans le programme d'appel.

En fait je veux construire un programme qui m'affichera 7 boites en arbre généalogique (fils, père, grand père, ..) et qui aura le nom à l'intérieur et c'est en cliquant dessus que je souhaite faire afficher tous les renseignements concernant cette personne.

Donc c'est là où je ne sais où mettre cette valeur qui sera transmise à ajax.
Merci.

Merci aussi à Fabrice91 de sa contribution.

avec jquery il es possible de stocker des infos au niveau de l'objet du DOM avec .data ...

Code:

---

<div id="foo" data-nom="dupont"> emile dupont </div>

---

Code:

---

$('#foo').click( function(){ alert ($(this).data('nom')) })

---

ou en attribution:

Code:

---

$('#foo').data('nom','paule duprez')

---

stockée au niveau de l'objet tu peut invoquer le data sur le click

Voilà ce qui manquait, où placer la valeur de cet id dans mon programme d'appel.
Maintenant je vois, mettre la valeur de mon id dans le nom de la balise.

Code:

---

<div id="foo" id_nom=$id_nom> ... </div>

---

et dans ajax faire un var id = $(this.data('id_nom')
soit

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

$(function() { $('#nom1').click(function() { var id = $(this.data('id_nom')); $.ajax({ type: "POST", url: "Ajax_rech_nom.php", data: "id_nom=id", success: function(retour){ alert( "Renseignements : " + retour[0], ... ); } }); }); });

---

et retour[0], ... contiendra les renseignements de mes echo du programme Ajax_rech_nom.php, c'est bien çà ??

Encore merci

C'est pas exactement ce que t'a indiqué Spaffy :

Code:

---

<div id="foo" data-nom="dupont"> emile dupont </div>

---

data-nom est un mot réservé à php/ajax ??

c'est un attribut de l'objet DOM donc au niveau html ...
qui est intégré dans jquery

Bonjour,
Merci je ne connaissais pas.
Bon avec toutes ces explications, je vais me lancer dans ma programmation d'arbres généalogiques, merci beaucoup.
Bonne journée

arbres généalogiques ...
https://github.com/spicyj/jquery-genealogy
https://developers.google.com/chart/...?hl=fr#Example

Merci beaucoup de ces url généalogiques en jquery, je vais voir comment cela peut m'aider.
Merci encore de tous les renseignements fournis ces derniers jours.
Bonne journée