Récupérer la bonne valeur dans ma variable d'une réponse retour AJAX

[Résolu/Fermé]
Signaler
Messages postés
78
Date d'inscription
jeudi 19 mars 2020
Statut
Membre
Dernière intervention
7 février 2021
-
Messages postés
78
Date d'inscription
jeudi 19 mars 2020
Statut
Membre
Dernière intervention
7 février 2021
-
Bonjour,

Je suis débutant en programmation et je travaille sur mon premier projet et je coince sur mon premier AJAX.

Je récupère donc mon résultat qui viens du PHP:

echo json_encode(array('result'=>$resultat,'sql'=>$sql,'datas'=>$datas));

qui contient :

JSON
Charge utile de la réponse

{"result":[{"id":"100001"},{"id":"100012"},{"id":"100034"},{"id":"100035"},{"id":"100044"},{"id":"100046"},{"id":"100065"}],"sql":"SELECT id FROM cutting_tools_01 WHERE FAMILLE_OUTIL = :FAMILLE_OUTIL AND SOUS_FAMILLE = :SOUS_FAMILLE ","datas":{":FAMILLE_OUTIL":"FRAISE",":SOUS_FAMILLE":"TORIQUE"}}

J'ai besoin d'utiliser les valeurs (100001, 100012, 100034, etc...)

J'ai tourné mon code dans tous les sens que j'ai pu imaginer, mais j'ai pas trouvé le bon.
Ce qui sors est une variable [objet Objet] le plus souvent. Ci dessous une capture ecran de la console

et mon JS:

//---------*************----------************-------------
//                  BOUTON RECHERCHER                    //
//---------*************----------************-------------

function fRecherche(){

  console.log("On entre dans la fonction fRecherche");
    let page = document.body ;
    let formRecherche = document.getElementById('idFormRechercher') ;
    let formRechercheDiv = document.getElementById('idDIVFrechercher') ;

    formRecherche.style.display = 'block' ;

    // NEUTRALISER LES 4 BOUTONS : CREER, RECHERCHER, MODIFIER, RESET.
    creation.removeEventListener('click',fCreation) ;
    recherche.removeEventListener('click',fRecherche) ;
    modification.removeEventListener('click',fModification) ;
    raz.removeEventListener('click',fReset) ;

} // SORTIE DE LA FONCTION fRecherche

//BOUTON FERMER RECHERCHE
let boutonFermerRecherche = document.getElementById('idboutonFermerRecherche');
boutonFermerRecherche.addEventListener('click',fermerRecherche ) ;

//  FONCTION DU BOUTON FERMER DU FORMULAIRE RECHERCHE
// Revalider les quatres boutons de l'entete - voir à utiliser attribut onclick de form
function fermerRecherche (){
  console.log("On entre dans la fonction FermerRecherche");
    let formRecherche2 = document.getElementById('idFormRechercher') ;
    creation.addEventListener('click',fCreation) ;
    recherche.addEventListener('click',fRecherche) ;
    modification.addEventListener('click',fModification) ;
    raz.addEventListener('click',fReset) ;

    formRecherche2.style.display = 'none';
}

//BOUTON VALIDER RECHERCHE
    // reference www.w3schools.com -> JAVA SCRIPT / JSON PHP
//alert ("Famille outil avant recuperation = " + (document.getElementById('idSlctCFamilleR').value)) ;
//alert ("Matiere avant recuperation = " + (document.getElementById('idSlctCMatiereR').value)) ;
//alert ("Diametre 1 avant recuperation = " + (document.getElementById('idInputDia1R').value))  ;  
 
let boutonValiderRecherche = document.getElementById('idboutonValiderRecherche');
boutonValiderRecherche.addEventListener('click',validerRecherche);
//boutonValiderRecherche.onclick = "validerRecherche()" ;
 
// FONCTIONS AJAX	
function validerRecherche(){
  console.log("Récupération des variables");
 
  // RECUPERATION DES VARIABLES DU FORMULAIRE RECHERCHE

var idSlctidR =  "";
var idSlctRef_MagR = ""; 
var idSlctFamilleR = document.getElementById('idSlctFamilleR').value;
var idSlctS_FamilleR = document.getElementById('idSlctS_FamilleR').value;
var idSlctMatiereR = document.getElementById('idSlctMatiereR').value;
var idInputNbreZR = "";
var idInputDia1R = document.getElementById('idInputDia1R').value;
var idInputLong1R = document.getElementById('idInputLong1R').value;
var idInputDia2R = document.getElementById('idInputDia2R').value;
var idInputDia3R = document.getElementById('idInputDia3R').value;
var idInputLongUtileR = document.getElementById('idInputLongUtileR').value;
var idInputLongTotaleR = document.getElementById('idInputLongTotaleR').value;
var idInputCaract1R = document.getElementById('idInputCaract1R').value;
var idInputCaract2R = "";
var idInputFournisseurR = document.getElementById('idInputFournisseurR').value;
var idInputRef_FournisseurR = document.getElementById('idInputRef_FournisseurR').value;
var idInputPrixR = document.getElementById('idInputPrixR').value;
var idInputQteMiniR = document.getElementById('idInputQteMiniR').value;
var idInputCasEmploi1R = document.getElementById('idInputCasEmploi1R').value;
var idInputCasEmploi2R = document.getElementById('idInputCasEmploi2R').value; 
var idInputCasEmploi3R = "";
var idInputCasEmploi4R = ""; 
var idInputCasEmploi5R = "";
var idInputCasEmploi6R = "";

var filtre = { id: idSlctidR,
               RefMag: idSlctRef_MagR,
               familleOutil: idSlctFamilleR ,
               SousFamille: idSlctS_FamilleR,
               Matiere: idSlctMatiereR,
               Dia1: idInputDia1R,
               Dia2: idInputDia2R,
               LongUtile: idInputLongUtileR,
               Caract1: idInputCaract1R,
               Fournisseur: idInputFournisseurR,
               Ref_Fournisseur: idInputRef_FournisseurR,
               CasEmploi1R: idInputCasEmploi1R,
               CasEmploi2R: idInputCasEmploi2R              
               };

function creerFiltreSend(obj) {
  var resultat = "";
  for (var i in obj) {
    if (obj.hasOwnProperty(i) && obj[i]!=""  ) {
        resultat += i + "=" + obj[i] + "&";
    }
  }
  return resultat;
}
               
var filtreSend = creerFiltreSend(filtre);
filtreSend = filtreSend.slice(0, filtreSend.length-1);
//alert(filtreSend); 

  console.log("On entre dans la fonction validerRecherche");
  var xmlhttp ="", resultRecherche = "",x="", idRow ="" ;    
  xmlhttp = new XMLHttpRequest();   
  xmlhttp.onreadystatechange = function() {    
    if (this.readyState == 4 && this.status == 200) {           
	  console.log("Success",xmlhttp); 
      resultRecherche = JSON.parse(this.responseText);  
      if(typeof(resultRecherche)!='undefined' && resultRecherche!=null){	
        var result = typeof(resultRecherche.result)!='undefined' ? resultRecherche.result : null;  
        if(result!=null){
			for (x in result){
                           console.log('x = ',x);
			   idRow = document.getElementById(x);                
			   idRow.style.display = 'none';
                        }          
	}         
    }else{
		  console.log('no result !');
		}
    }else {
      console.log(xmlhttp, xmlhttp.status); 
    }	
 };
 xmlhttp.open("POST", "trouver.php", true);
 xmlhttp.onerror = function () { 
    console.log(xmlhttp, xmlhttp.status); 
	alert("Erreur ajax : Regarder la console pour plus de détails !");
 }; 
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(filtreSend);

}  
	

//ECOUTE DU CLICK SUR BOUTON RECHERCHE
let recherche = document.getElementById('chercher') ;
recherche.addEventListener('click',fRecherche) ;





Configuration: Windows / Firefox 75.0


Merci d'avance pour votre aide.

3 réponses

Messages postés
33457
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 septembre 2021
3 714
Re Bonjour,

Peux tu tester ceci ?
 xmlhttp.onreadystatechange = function() {    
    if (this.readyState == 4 && this.status == 200) {           
      // console.log("Success",xmlhttp); 
      resultRecherche = JSON.parse(this.responseText);  
      if(typeof(resultRecherche)!='undefined' && resultRecherche!=null){ 
         var result = typeof(resultRecherche.result)!='undefined' ? resultRecherche.result : null;  
         if(result!=null){
           console.log('RESULT :',result); // pour savoir ce que contient la variable result.
           console.log('RESULT -> Json :',JSON.parse(result));
           /*
           for (x in result){
             console.log('x = ',x);
              idRow = document.getElementById(x);                
              idRow.style.display = 'none';
           } 
          */
        }         
      }else{
        console.log('no result !');
      }
    }else {
      console.log(xmlhttp, xmlhttp.status); 
    } 
 };




Cordialement,
Jordane
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42584 internautes nous ont dit merci ce mois-ci

Messages postés
78
Date d'inscription
jeudi 19 mars 2020
Statut
Membre
Dernière intervention
7 février 2021

Messages postés
33457
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
12 septembre 2021
3 714
Donc, result contient bien la liste (en objet)

et ça ?
 xmlhttp.onreadystatechange = function() {    
    if (this.readyState == 4 && this.status == 200) {           
      // console.log("Success",xmlhttp); 
      resultRecherche = JSON.parse(this.responseText);  
      if(typeof(resultRecherche)!='undefined' && resultRecherche!=null){ 
         var result = typeof(resultRecherche.result)!='undefined' ? resultRecherche.result : null;  
         if(result!=null){
           console.log('RESULT :',result); // pour savoir ce que contient la variable result.

   
           for (x in result){
             console.log('id = ',x, result[x].id);
             // idRow = document.getElementById(x);                
             // idRow.style.display = 'none';
           } 
        
        }         
      }else{
        console.log('no result !');
      }
    }else {
      console.log(xmlhttp, xmlhttp.status); 
    } 
 };
Messages postés
78
Date d'inscription
jeudi 19 mars 2020
Statut
Membre
Dernière intervention
7 février 2021

Messages postés
78
Date d'inscription
jeudi 19 mars 2020
Statut
Membre
Dernière intervention
7 février 2021

Super Merci Jordan, ça marche maintenat.
J'ai écrit, et ça enlève les lignes sélectionnées:

  for (x in result){
             console.log('id = ',x, result[x].id);
             var y = result[x].id;
             idRow = document.getElementById(y);                
             idRow.style.display = 'none';
           } 


Un grand merci!!!
Il me reste plus qu' à retourner dans le PHP pour voir comment j'inverse la selection.

JC