Appels ajax imbriqués

Version imprimable

bonjour,

je me lance avec ajax, et je suis confronté à l'imbrication de requêtes en ajax.

J'exécute une 1ère requête qui me retourne un objet json dans lequel j'ai des string, mais aussi des ID.

Je parcours ma 1ere requête avec une boucle for ( for (var i = 0; i < data.length; i++)), et j'exécute une seconde requête ajax qui est sensée me retourner la valeur correspondante à mon 1ere ID...et c'est là mon problème, je ne trouve pas la bonne méthodologie.

J'ai essayé avec le success mais sans succés...du coup, j'essaye avec le done...mais ça ne change rien.

Merci de votre aide.

Ci-dessous, un exemple de mon code pour lequel je tente de récupérer la marque du véhicule en clair à partir de l'id que je récupère dans ma 1ere requête ajax :

Code:

{mesVehiculeID: 1, marqueId: 2, type: "308", immatriculation: "JU-951-DE", etatId: 2}

Finalement, j'obtiens un 'undefined' au lieu de la marque.

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
$.ajax({
           type: 'GET',
           url: 'donnees/fichier.json',
           dataType: 'json'
            }).done(function(data){
                for (var i = 0; i < data.length; i++) {
 
                    var nom_div = 'div' + i;
                    $("#ajoutdiv").append("<div><li class='col-xs-6 col-sm-3 col-md-2 col-lg-3 div_vehicule'><div id=" + nom_div + " class='divVehicules'></div></li></div>");
 
                    var marque_du_vehicule;
 
                    var urlMarque = 'marques/' + data[i].marqueId + '.json';
 
                    $.ajax({ 
                        url: urlMarque,
                        type: 'GET', 
                        dataType: 'json'
                    }).done(function(dataMarque){
                        marque_du_vehicule = dataMarque.marque;
                        var contenu = "<span class='police_texte'>" + marque_du_vehicule + "<br/>" + data[i].type+ "<br/>" + data[i].immatriculation+ "<br/>" + data[i].etatId+ "<br/></br></span>" +
                                "<a data-toggle='modal' data-id=" + data[i].mesVehiculeID+ " class='edit_vehicule' href='#myModalModifVehicule'><img src='ressources/images/edit64.png' /></a>&nbsp;&nbsp;" +
                                "<a href=''><img src='ressources/images/recycle.png' /></a>";
 
                        var nom_div = '#div' + i;
                        $(nom_div).html(contenu);
                    });
                }
            });

14/04/2017, 19h00
daphi

je viens de mettre un async: false sur la 2eme requete, et ça fonctionne...

J'ai donc fait la même chose sur la 3eme requête me permettant de récupérer la valeur en clair de mon 2eme ID, et j'ai un temps de réponse en localhost d'environ 4 secondes !!!

Est-ce la bonne méthode ?
15/04/2017, 11h34
NoSmoking

Bonjour,
j'ai du mal à comprendre pourquoi tu enchaines plusieurs requêtes dans ta fonction success, sans autre intervention de l'utilisateur, et que tu ne fais pas la recherche/retour directement coté serveur ?
15/04/2017, 17h43
daphi

malheureusement, je ne code pas côté serveur, mais côté client...de ce fait, je fais avec ce que me donne le développeur côté serveur...

et lui, il me donne des url pour allez chercher la correspondance ID - texte en clair

Je pensai que cela était normal...et que moi, de mon côté, je devais me débrouiller pour lui retourner des ID ?

non ?
18/04/2017, 11h50
NoSmoking

J'ai du mal à comprendre la logique mais je dirais,
a réception de ta 1st requête, tu récupères l'ID puis tu relances une 2nd requête en passant en paramètre cette ID, mais sans envoyer d'autre requête, une seule suffit. Tout ceci se passe donc dans ta fonction success.

Actuellement tu as de toutes façons un soucis avec la valeur de ton i dans tes boucles au retour, asynchrone, de tes requêtes.
19/04/2017, 10h49
daphi

Merci pour ta réponse.

Effectivement, le i dans la seconde requête n'était pas correct, et j'ai donc créé un j++ pour la seconde requête dans le success de la 1ère.....et je me suis dit que pour la 3eme requête, il m'aurait fallut créer un k++ dans le success de ma deuxième....enfin bref, je me suis dit que ce n'était sans doute pas la bonne méthode.

Par contre, désolé, je suis sans doute dur de la feuille :-), mais quand tu dit :

"a réception de ta 1st requête, tu récupères l'ID puis tu relances une 2nd requête en passant en paramètre cette ID, mais sans envoyer d'autre requête, une seule suffit."

je n'arrive pas à suivre ton raisonnement sur la fin de ton explication : "puis tu relances une 2nd requête en passant en paramètre cette ID, mais sans envoyer d'autre requête, une seule suffit"

Dans la première requête, je récupère effectivement 2 ID, pour lesquels je dois relancer 2 requêtes ajax depuis le success de la première non ?

:yaisse2: j'ai compris, dur à la détente sur ce coup :mrgreen:

Dans ton cas il te faut « externaliser » la 2^éme requête en lui passant les paramètres qui la concerne, cela pourrait ressembler à cela :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getDetails(idDest, data) {
    var urlMarque = 'marques/' + data.marqueId + '.json';
    var marque_du_vehicule;
    var contenu;
    $.ajax({
        url: urlMarque,
        type: 'GET',
        dataType: 'json'
    }).done(function(dataMarque) {
        marque_du_vehicule = dataMarque.marque;
        contenu = '<span class="police_texte">' + marque_du_vehicule + '<br/>' + data.type + '<br/>' + data.immatriculation + '<br/>' + data.etatId + '<br/></br></span>' +
            '<a data-toggle="modal" data-id=' + data.mesVehiculeID + ' class="edit_vehicule" href="#myModalModifVehicule"><img src="ressources/images/edit64.png" /></a>&nbsp;&nbsp;' +
            '<a href=""><img src="ressources/images/recycle.png" /></a>';
        $('#' + idDest).html(contenu);
    });
}

et l'appel se fait à partir de ta 1^ére requête

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$.ajax({
    type: 'GET',
    url: 'donnees/fichier.json',
    dataType: 'json'
}).done(function(data) {
    var nom_div;
    var i;
    var nb = data.length;
    for (i = 0; i < nb; i += 1) {
        // ajout élément
        nom_div = 'div' + i;
        $('#ajoutdiv').append('<div><li class="col-xs-6 col-sm-3 col-md-2 col-lg-3 div_vehicule"><div id="' + nom_div + '" class="divVehicules"></div></li></div>');
 
        // recup des détails
        getDetails(nom_div, data[i]);
    }
});

Remarque : le code HTML résultant n'est pas exempt de reproche !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
  <li>
    <div id="">
      <span>
        ...<br/>
        ...<br/>
        ...<br/>
        ...<br/>
        </br>
      </span>
      <a href=""><img src="" /></a>&nbsp;&nbsp;
      <a href=""><img src="" /></a>';
    </div>
  </li>
</div>

24/04/2017, 11h49
daphi

super....merci beaucoup.