Passage de variable GET avec un système Ajax

Par Frank Hélin, il y a 11 ans

PHP

Bonjour,

J'utilise un système Ajax pour afficher des pages dans un conteneur.
Est-il possible de passer des variables GET avec ce système ? Sinon, comment faire ?

Merci par avance !

32 réponses

satwa, il y a 11 ans

Je crois pas qu'il y ai d'équivalent au var_dump à part un console.log

Huggy, il y a 11 ans

Oui pas de soucis, il suffit de passer les arguments dans l'url

function demoAjax() { var xmlhttp = new XMLHttpRequest(); // on crée l'objet xmlhttp.open("GET", "demo.php?fname=Henry&lname=Ford", false); // méthode, url, is-asynchrone xmlhttp.send(null); .. bloque en attendant la réponse reprend }

comme les argument sont déja dans l'url, il n'y a rien à passer dans le send, du coup on passe null

Frank Hélin, il y a 11 ans

Ok, mais le pb c'est que la variable à passer est issue d'une bdd sql.
L'extrait de code qui suit t'aidera sans doute à comprendre ce que j'aimerai faire...

<?php $reponse = $bdd->query('SELECT * FROM table'); while ($res = $reponse->fetch()) { ?> <!-- Du code, du code, du code ... puis... --> <a href="contenu.php?id=<?php $res['id']; ?>">LIEN</a> <?php } $reponse->closeCursor(); ?>

Cela affiche 10 bloques avec contenu texte, image et liens.
Est-il envisageable d'écrire PHP dans le code JS ? - Ce n'est peut-être pas très élégant et un peu farfelu, je ne sais pas car novice :-)

Frank Hélin, il y a 11 ans

Ah, et côté JS, ça donne ceci :

$(document).ready(function() { $("#menu a").click(function() { page=$(this).attr("href"); $.ajax({ url: "repertoire/"+page, cache: false, dataType: 'HTML', success: function (html) { afficher(html); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); } }) return false; }); }); function afficher(data) { $("#contenu").empty(); $("#contenu").append(data); xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "contenu.php?id=BMW", false); xmlhttp.send(null); }

Mais ce que j'aimerai vraiment ...

xmlhttp.open("GET", "contenu.php?ida=\"<?php $res['id'] ?>\"", false);
Huggy, il y a 11 ans

Non, pas de php côté js
Tu peux tout faire en php comme ceci

<?php $reponse = $bdd->query('SELECT * FROM table'); while ($res = $reponse->fetch()) { <!-- Du code, du code, du code ... puis... --> echo "<a href="contenu.php?id=" . $res['id'] . ">LIEN</a>"; } $reponse->closeCursor(); ?>

plutôt qu'un echo, le mieux étant de concaténer dans une variable puis d'urlencoder le tout puis de faire un echo

Frank Hélin, il y a 11 ans

J'ai déjà essayé et mon id ne passe pas :-(

Frank Hélin, il y a 11 ans

Je ne vois pas comment adapter le code JS...

betaWeb, il y a 11 ans

Il faudrait récupérer ton lien généré dans la page appelant le script AJAX (tu peux le placer dans un input de type hidden par exemple), puis récupérer ce lien en JS (via un sélécteur tout bête $('input#mon_lien').val(); ). De cette façon tu aura ton lien sans avoir à faire 2 requêtes ajax. Tu me suis ?

Frank Hélin, il y a 11 ans

Dans l'idée, je crois, mais concrétement, je ne vois pas comment écrire le code côté JS que je ne connais malheureusement pas encore :-( Un petit coup de main serait bienvenue :-)

<!-- Lien basique dans ma page --> <a href="contenu.php?id=<?= $res['id']; ?>">LIEN</a>

Côté JS

$(document).ready(function() { $("#menu a").click(function() { page=$(this).attr("href"); $.ajax({ url: "articles/"+page, cache: false, dataType: 'HTML', success: function (html) { afficher(html); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); } }) return false; }); }); function afficher(data) { $("#contenu").empty(); $("#contenu").append(data); $('input#$lienblog').val(); // EST-CE QUE LE CODE TROUVE SA PLACE DANS CETTE FONCTION ? LE LIEN N'ÉTANT PAS CONNU D'AVANCE, QUEL VALEUR AJOUTER ? }
betaWeb, il y a 11 ans

Je ne comprends rien à ta fonction "afficher", quel est son rôle ?
Et du dis "LE LIEN N'ÉTANT PAS CONNU D'AVANCE", de quel lien parles-tu ? Ce n'est pas clair.
Essayes de réexpliquer ce que tu veux faire étape par étape (sans code).

Frank Hélin, il y a 11 ans

afficher vide le contenu puis le rempli (Ajax) Ce que j'aimerai c'est pouvoir passer des variables de page en page (Ajax) Quand je dis le lien n'est pas connu d'avance, je veux dire qu'il doit être sous forme de variable dans le script JS et non pas en valeur absolue, pas comme ça : $('input#repertoire1/repertoire2/contenu.php?id=valeur').val();

En résumer :

  • La page PHP contient des liens formatés comme suit : <a href="contenu.php?id=<?php echo $donnees['id']; ?>">LIEN</a>
  • J'aimerai passer l'id (donnees['id'];) du lien dans la page de destination, ou au pire l'url complet.
betaWeb, il y a 11 ans

PHP

<a class="link" href="contenu.php?id=<?php echo $donnees['id']; ?>">LIEN</a>

JS

var href = $('.link').attr('href');

Ce qui te donnera le lien en JS.

Mais une fois que tu as ce lien, tu veux en faire quoi ? C'est ça que je ne comprends pas...

Frank Hélin, il y a 11 ans

C'est l'id qui m'intéresse, il permettra d'afficher certaines infos plutôt que d'autres. En claire, si id = xxx alors extractions de données dans tel table, tel colones, etc.
Donc, var href récupére le lien, ok, mais comment le stocker dans une variable et/ou le récupérer dans la page de destination ? - Désolé mais je ne connais pas du tout JS. Je dois m'y mettre un jour, mais là je suis un peu en retard sur mon site -

Frank Hélin, il y a 11 ans

Oups, désolé, href est la variable. Donc, je stock la variable dans href mais comment la récupérer ensuite ?

Huggy, il y a 11 ans

Tu peux créer ton propre attribut, par exemple 'data-id'

<a href="contenu.php?id=<?php echo $donnees['id']; ?>" data-id="<?php echo $donnees['id']; ?>">LIEN</a>

entsuite tu le lis avec

var href = $('.link').attr('data-id');
Frank Hélin, il y a 11 ans

Quelque chose m'échappe. Un echo $_donnees['id'] m'affiche le bon id dans chacun des 10 bloques générés dans la page.
Mais si je teste la variable href avec un document write en js, l'id prend la même valeur dans les 10 bloques ! Comprends pas. :-(
Enfin, je ne parviens pas à récupérer cette variable dans ma page de destination.

Frank Hélin, il y a 11 ans

Rien à faire, un attribut data-id retourne la même valeur !

Frank Hélin, il y a 11 ans

Le problème vient-il du code JS dans la boucle ?

Huggy, il y a 11 ans

Quand tu regardes le code source de ta page html, tu vois bien des id différents ?
Si oui ça vient de ton js, montre nous ta boucle

Frank Hélin, il y a 11 ans

Je parle de la boucle while pour générer les 10 blocs avec la bdd sql. Oui, chaque data-id est correcte dans le code source de mon navigateur. Pour le JS je l'ai déjà posté plus haut, mais je le remets et en profite pour tout réxpliquer le plus simplement possible ;-)

  • La page index.php est la page de départ et inclut une page nommé 'pages'
  • La susnommé 'pages' contient le conteneur Ajax (id= 'contenu') ainsi que l'appel du script Ajax 'nav.js'
  • La page 'pages' génére 10 bloques texte à l'aide d'une boucle while. Chaque bloque contient de données issues d'une bdd sql y compris l'id des liens.
  • Les pages appelées dans contenu doivent pouvoir récupérer la valeur id de chaque lien et pourquoi pas l'url complet (il me suffirait ensuite de filtrer en php pour extraire cet id)

Extrait de la page 'pages' :

<?php $reponse = $bdd->query('SELECT * FROM table'); while ($res = $reponse->fetch()) { ?> <!-- Du code, du code, du code ... puis... --> <a href="contenu.php?id=<?php echo $donnees['ida']; ?>" data-id="<?php echo $donnees['ida']; ?>" class="link">LIEN</a> <?php } $reponse->closeCursor(); ?>

Le code Ajax dans 'nav.js' :

$(document).ready(function() { $("#menu a").click(function() { page=$(this).attr("href"); $.ajax({ url: "repertoire/"+page, cache: false, dataType: 'HTML', success: function (html) { afficher(html); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); } }) return false; }); }); function afficher(data) { $("#contenu").empty(); $("#contenu").append(data); type="application/javascript"; var href = $('.link').attr('data-id'); // J'ai placé le stockage de la variable id dans la fonction afficher, mais peut-être vaut-il mieux créer une autre fonction... }

La page insérée dans le conteneur (id=contenu) où je souhaite récupérer la variable id :

document.write("id vaut : ",href); // Ce test me renvoie toujours la même variable id quelque soit le lien sur lequel j'ai cliqué ! //

Voilà.

Merci d'avance !

:-)

PS : Quel est l'équivalent de var_dump en js ?

Huggy, il y a 11 ans

pour déboguer tu dois faire

console.log("mavar=" + mavar);

et le message s'affiche dans la console javascript du navigateur

Ton pb est lié au fait que javascript compile le code au début et la valeur de ta variable href est fixée trop tôt.
Autre chose, $('.link').attr('data-id') retourne un tableau des 'data-id' de tous les liens qui ont la classe .link
tu dois donc parcourir le tableau avec la méthode each()

$('.link').each( function (index, value) { $document.write("id vaut " + $(this).attr('data-id')); });
Frank Hélin, il y a 11 ans

À quoi correspond index et value ?

Frank Hélin, il y a 11 ans

Je crois que je suis largué !

Frank Hélin, il y a 11 ans

Bon, je reviendrai sur ajax et le passage de variable plus tard. Merci pour votre aide.

Frank Hélin, il y a 11 ans

Argh, je voulais contourner le problème et y revenir plus tard mais ça me taraude ! Donc, j'ai utilisé each. Plus rien ne s'affichait. J'ai alors déclaré href en bas de page... et alors la même valeur qui s'est affichée 10 fois :-(

Huggy, il y a 11 ans

la fonction est appelée autant de fois qu'il y a d'éléments de classe 'link' et à chaque fois l'index augmente (on parcourt un tableau)
la value c'est la valeur du tableau à l'index 'index', pour nous, c'est une balise a
insert un console.log("index=" + index);
console.log("value=" + value);

Frank Hélin, il y a 11 ans

console.log me renvoie cette erreur dans la console de chrome : Uncaught ReferenceError: index is not defined
et ensuite :
(anonymous function)jquery.min.js:2 (anonymous function)jquery.min.js:2 m.extend.globalEvaljquery.min.js:2 m.fn.extend.domManipjquery.min.js:2 m.fn.extend.appendnav.js:24 affichernav.js:11 $.ajax.successjquery.min.js:2 jjquery.min.js:2 k.fireWithjquery.min.js:2 xjquery.min.js:2 b

Et pour ce qui est de déclarer href plus tard, cela veut bien dire en bas de page et donc hors de la boucle while ?

Frank Hélin, il y a 11 ans

Voici la structure de la page index.php au cas ou...

<script src="js/nav.js"></script> <section id="contenu"> <?php $reponse = $bdd->query('SELECT * FROM table'); while ($donnees = $reponse->fetch()) { ?> <article> <!-- Du code ... + lien --> <a href="contenu.php?id=<?php echo $res['id']; ?>" data-id="<?php echo $res['id']; ?>" class="link">LIEN</a> <?php } $reponse->closeCursor(); ?> </section> <script type="application/javascript"> var href = $('.link').attr('data-id'); document.write("La valeur de href est ",href); // Affiche toujours la même valeur var href = $('.link').each( function (index, value) { $document.write("id vaut " + $(this).attr('data-id')); // N'affiche rien }); </script>
Frank Hélin, il y a 11 ans

Bon, je laisse tomber car je suis largué. Je contourne le problème. Merci pour votre aide.

Huggy, il y a 11 ans

t'as un $ devant document.write qui ne sert à rien
Chez moi ça fonctionne

Frank Hélin, il y a 11 ans

J'ai supprimé le $, ça ne fonctionne pas mieux. Je reprendrai plus tard car je me suis arraché pas mal de cheveux et je dois avancer. Merci à toi en tout cas !

JC_Pires, il y a 11 ans

Et ça ?

$data={}; $data= { url: $(this).attr('data-url'), // ou $(this).attr("href"); id: $(this).attr('data-id') }; var jqxhr = $.get( $data.url, $data) .done(function(data, textStatus) { $result = JSON.parse(data); // Un exemple de retour JSON }) .fail(function() { alert( "error" ); }) .always(function() { });