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


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

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 :-)

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);

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

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

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

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 ?

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 ?
    }

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).

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.

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...

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 -

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

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');

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.

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

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

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

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 ?

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

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'));
   });

À quoi correspond index et value ?

Je crois que je suis largué !

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

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 :-(

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);

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 ?

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>

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

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

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 !

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() {
    });