Premiers pas en Ajax : $.post

Par Brandon93, il y a 11 ans

Javascript

Bonjour,

Je poursuis mon initiation en jQuery et je m'acharne maintenant sur les requêtes en Ajax. Ayant constaté l'utilité d'Ajax, cela me semble un élément indispensable pour poursuivre mon apprentissage en programmation.

Pour le coup je souhaite récupérer des valeurs que l'on retrouve dans "onclick" :

<a href="#" onclick="like('<?php echo $donnee['id']; ?>','<?php echo $like_nb; ?>')">BOUM</a> <div class="titre"><?php echo $titre; ?></div>

Je souhaite donc récupérer $donnee['id'] et $like_nb et $titre pour les inclure par la suite dans une bdd.
J'ai essayé avec $.post :

<script> function like(id,nb) { var titre = $('.titre').val(); var id = $(id).val(); var nb = $(nb).val(); $.post('like.php',{titre:titre,id:id,nb:nb},function(data){ $('.afficher').html(data); }); } </script>

Ma requête dans ma page like.php

<?php $bdd = new PDO ('mysql:host=localhost;dbname=blabla', 'root', ''); if(isset($_POST['id']) AND isset($_POST['titre']) AND isset($_POST['nb'])){ $req = $bdd->prepare('INSERT INTO votes (user,vote,id_message,titre,date_ajout,nb) VALUE (:user, 1, :id_message, :titre, NOW(), :nb)'); $tab = array ( 'user' => $_SESSION['pseudo'], 'id_message' => $_POST['id'], 'titre' => $_POST['titre'], 'nb' => $_POST['nb'] ); $req->execute($tab); $req->closeCursor(); } ?>

Quelque chose cloche mais je ne sais pas quoi, je ne sais pas où.
J'ai essayé de chipoter un peu partout.

Quelqu'un peut-il me mettre sur la voie ?
Merci :)

6 réponses

lucien-lefoll, il y a 11 ans

Mmmmh tu peux utiliser GET dans un premier temps, et appeller ta page like.php avec les paramètres suivants (par exemple) :

"like.php?titre=monTitre&id=12&nb=3"

Ce que la page affiche sera ce qui est récupéré par la méthode $.get ou $.post de JQuery, et donc tes données !

Je pense aussi que tu dois afficher le résultat de ta requête avec un echo !

Brandon93, il y a 11 ans

Merci pour cette suggestion.
J'ai donc essayé avec la méthode 'get'. Ca fonctionne quand je fixe la valeur.
Exemple :

$.get('like.php?titre=3',function(data){});

Par contre la valeur entrée ds la bdd est vide quand j'essaie ceci :
(J'avais la même chose avec la méthode 'post')

var titre = $('.titre').val(); $.get('like.php?titre='+titre,function(data){});
lucien-lefoll, il y a 11 ans

Le paramètre de la requête INSERT INTO doit être VALUES et non VALUE, peut être que ton problème vient d'ici.

Brandon93, il y a 11 ans

Visiblement non, j'avais déjà vérifié =)

Acrew, il y a 10 ans

Sauf erreur de ma part, tes variables $donne['id'] et $like sont des nombres. Tu les intègres à ton code html.

<a href="#" onclick="like('<?php echo $donnee['id']; ?>','<?php echo $like_nb; ?>')">BOUM</a>

Pourtant, ton code javascript charge la valeur de balises ayant ce nom.

function like(id,nb) { var titre = $('.titre').val(); var id = $(id).val(); var nb = $(nb).val();

Donc si tu as 106 likes, js va chercher la valeur de la balise <106>.
Pour le titre, as tu plusieurs champs .titre dans ta page ?

Je te conseille ces modifications :

<a href="#" onclick="like(<?php echo $donnee['id'] . ',' . $like_nb . ',\"' . $titre . '\"'; ?>)">BOUM</a> <div class="titre"><?php echo $titre; ?></div> function like(id,nb,titre) { $.post('like.php',{titre:titre,id:id,nb:nb},function(data){ $('.afficher').html(data); }); return false; //pour éviter le chargement de la page /# lors du clic sur le lien. }

De manière générale on préfère toujours utiliser des id pour la manipulation javascript, les classes pouvant faire référence à plusieurs éléments.

betaWeb, il y a 10 ans

Salut,

Ce que je ne comprends pas, c'est qu'au succès de ton appel ajax, tu passes la variable "data" en paramètre pour ensuite l'injecter dans ton élément HTML ".afficher". Sauf qu'à aucun moment tu ne renvoie des infos depuis ton script PHP qui fait l'INSERT.
Il te faut au moins renvoyer quelque chose en fin de script PHP:

/* die() coupe l'execution de la fonction et affiche ce que tu lui donne en paramètre (STRING ou INT) */ die(json_encode(["success" => 1, "html" => "Les infos que je veux injecter dans mon élément HTML .afficher"]));