11484 sujets

JavaScript, DOM et API Web HTML5

Récupérer un tableau d'un foreach php pour le parser en AJAX

Bonjour à tous,
J'ai fais énormément de recherches sur le net, et je ne trouve pas de réponse a mon problème.
Du coup, j'espère que je ne fais pas de doublon.

mon souci:
Je récupère un XML en PHP,
je stocke dans des variables tout ce dont j'ai besoin, via un foreach, et une condition.
Ces variables je les mets dans un tableau.
Je sors de mon foreach, et j'aimerais envoyer ce tableau dans mon script ajax, via "echo json_encode();

sur mon navigateur, il m'imprime bien mon tableau en JSON mais dans ma console il est NULL ! pourquoi ?? Smiley bawling

mon php:

<?php
//création d'un objet DomDocument (class PHP)
$dom = new DomDocument();

//Chargement du fichier XML
$dom->load('xxxx');

//Recherche des values suivant le nom de la balise xml
$matches = $dom->getElementsByTagName('match');

//Affichage des points
foreach ($matches as $match) {
    $id_match = !empty($_POST['id_match']) ? $_POST['id_match'] : NULL;
    //Condition pour le matchin de l'id du match
    if ($id_match == $match->getElementsByTagName("matchid")->item(0)->nodeValue AND $match->getElementsByTagName("matchstatus")->item(0)->nodeValue == "(in progress)") {

        //Stockage des joueurs
        $player1 = !empty($match->getElementsByTagName("player1")->item(0)->nodeValue) ? $match->getElementsByTagName("player1")->item(0)->nodeValue : "Inconnu" ;
        //$player1_2 = (!empty($match->getElementsByTagName("team1p2")->item(0)->nodeValue)) ? $match->getElementsByTagName("team1p2")->item(0)->nodeValue : "Inconnu";
        
        $player2 = !empty($match->getElementsByTagName("player2")->item(0)->nodeValue) ? $match->getElementsByTagName("player2")->item(0)->nodeValue : "Inconnu" ;
        //$player2_2 = (!empty($match->getElementsByTagName("team2p2")->item(0)->nodeValue)) ? $match->getElementsByTagName("team2p2")->item(0)->nodeValue : "Inconnu" ;
        
        //Mise en session des data's + Caractère spéciaux a supprimer -> ,
        $player1 = str_replace(",","",$player1);
        $player2 = str_replace(",","",$player2);
        
        //Stockage des ponts de set
        $set1_1 = $match->getElementsByTagName("set11")->item(0)->nodeValue;
        $set1_2 = $match->getElementsByTagName("set12")->item(0)->nodeValue;
        $set2_1 = !empty($match->getElementsByTagName("set21")->item(0)->nodeValue) ? $match->getElementsByTagName("set21")->item(0)->nodeValue : "";
        $set2_2 = !empty($match->getElementsByTagName("set22")->item(0)->nodeValue) ? $match->getElementsByTagName("set22")->item(0)->nodeValue : "";
        $set3_1 = !empty($match->getElementsByTagName("set31")->item(0)->nodeValue) ? $match->getElementsByTagName("set31")->item(0)->nodeValue : "";
        $set3_2 = !empty($match->getElementsByTagName("set32")->item(0)->nodeValue) ? $match->getElementsByTagName("set32")->item(0)->nodeValue : "";
        $set4_1 = !empty($match->getElementsByTagName("set41")->item(0)->nodeValue) ? $match->getElementsByTagName("set41")->item(0)->nodeValue : "";
        $set4_2 = !empty($match->getElementsByTagName("set42")->item(0)->nodeValue) ? $match->getElementsByTagName("set42")->item(0)->nodeValue : "";
        $set5_1 = !empty($match->getElementsByTagName("set51")->item(0)->nodeValue) ? $match->getElementsByTagName("set51")->item(0)->nodeValue : "";
        $set5_2 = !empty($match->getElementsByTagName("set52")->item(0)->nodeValue) ? $match->getElementsByTagName("set52")->item(0)->nodeValue : "";

        //stockage des points de jeux
        $set1g = !empty($match->getElementsByTagName("game1")->item(0)->nodeValue) ? $match->getElementsByTagName("game1")->item(0)->nodeValue : "0" ;
        $set2g = !empty($match->getElementsByTagName("game2")->item(0)->nodeValue) ? $match->getElementsByTagName("game2")->item(0)->nodeValue : "0" ;


        //stockage des points de tiebreak
        $set1_1_tb = !empty($match->getElementsByTagName("set1tb")->item(0)->nodeValue) ? $match->getElementsByTagName("set1tb")->item(0)->nodeValue : "" ;
        $set1_2_tb = !empty($match->getElementsByTagName("set2tb")->item(0)->nodeValue) ? $match->getElementsByTagName("set2tb")->item(0)->nodeValue : "" ;

        $scoreTeam1 = "  ".$set1_1." ".$set2_1." ".$set3_1." ".$set4_1." ".$set5_1." ".$set1g;
        $scoreTeam2 = "  ".$set1_2." ".$set2_2." ".$set3_2." ".$set4_2." ".$set5_2." ".$set2g;

        //Balle de service
        $balle = "<figure class='balle'></figure>";
        $balle1 = "";
        $balle2 = "";

        //service
        $match->getElementsByTagName("player2serve")->item(0)->nodeValue == "1" ? $balle1 = $balle : $balle1 = "";
        $match->getElementsByTagName("player2serve")->item(0)->nodeValue == "2" ? $balle2 = $balle: $balle2 = "";

        //stockage des données & encodage en JSON pour le traitement en AJAX    
        $data = array(
            'player1' => $player1,
            'player2' => $player2
        );    

    }//end condition matching de l'id du match

}//end foreach


echo json_encode($data);
?>



Mon JS: 


setInterval(function(){

    $.ajax({
        url:"./display.php",
        type: "GET",
        dataType: "json",
        success: function (res) {
            console.log(res);
        },

        error: function(){
            console.log("error");
        }
        
    })

}, 1000)

Modifié par Deblandero (17 Jul 2018 - 09:34)
Avant que display.php envoie des données sur la sortie, ce serait déjà mieux qu'il dise quel format de données il utilise en précisant le mime-type qui va bien
<?php
.......
header('Content-Type: application/json');
echo json_encode($data);
?>

On suppose par défaut que le charset employé est UTF-8
Pour peaufiner, on peut préciser avec différents headers comment on utilise les différents caches parsemés le long du chemin des données et la date de validité de l'information.

Pour comprendre un peu mieux ouvre l'explorateur de code de Chrome ou Firefox, clique sur l'onglet réseau. Recharge la page. Clique sur une URL pour voir le dialogue entre le navigateur et le serveur.
Bonjour bazooka07,
Merci beaucoup pour ta réponse,
quand j'ajoute tes deux lignes à cet endroit :
(voici le code) :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
    
<?php

header('Content-Type: application/json');
echo json_encode($data);
//création d'un objet DomDocument (class PHP)
$dom = new DomDocument();

//Chargement du fichier XML
$dom->load('xxxx');

//Recherche des values suivant le nom de la balise xml
$matches = $dom->getElementsByTagName('match');
//Affichage des points
foreach ($matches as $match) {
    $id_match = !empty($_POST['id_match']) ? $_POST['id_match'] : NULL;
    //Condition pour le matchin de l'id du match
    if ($id_match == $match->getElementsByTagName("matchid")->item(0)->nodeValue AND $match->getElementsByTagName("matchstatus")->item(0)->nodeValue == "(in progress)") {

        //Stockage des joueurs
        $player1 = !empty($match->getElementsByTagName("player1")->item(0)->nodeValue) ? $match->getElementsByTagName("player1")->item(0)->nodeValue : "Inconnu" ;
        //$player1_2 = (!empty($match->getElementsByTagName("team1p2")->item(0)->nodeValue)) ? $match->getElementsByTagName("team1p2")->item(0)->nodeValue : "Inconnu";
        
        $player2 = !empty($match->getElementsByTagName("player2")->item(0)->nodeValue) ? $match->getElementsByTagName("player2")->item(0)->nodeValue : "Inconnu" ;
        //$player2_2 = (!empty($match->getElementsByTagName("team2p2")->item(0)->nodeValue)) ? $match->getElementsByTagName("team2p2")->item(0)->nodeValue : "Inconnu" ;
        
        //Mise en session des data's + Caractère spéciaux a supprimer -> ,
        $player1 = str_replace(",","",$player1);
        $player2 = str_replace(",","",$player2);
        
        //Stockage des ponts de set
        $set1_1 = $match->getElementsByTagName("set11")->item(0)->nodeValue;
        $set1_2 = $match->getElementsByTagName("set12")->item(0)->nodeValue;
        $set2_1 = !empty($match->getElementsByTagName("set21")->item(0)->nodeValue) ? $match->getElementsByTagName("set21")->item(0)->nodeValue : "";
        $set2_2 = !empty($match->getElementsByTagName("set22")->item(0)->nodeValue) ? $match->getElementsByTagName("set22")->item(0)->nodeValue : "";
        $set3_1 = !empty($match->getElementsByTagName("set31")->item(0)->nodeValue) ? $match->getElementsByTagName("set31")->item(0)->nodeValue : "";
        $set3_2 = !empty($match->getElementsByTagName("set32")->item(0)->nodeValue) ? $match->getElementsByTagName("set32")->item(0)->nodeValue : "";
        $set4_1 = !empty($match->getElementsByTagName("set41")->item(0)->nodeValue) ? $match->getElementsByTagName("set41")->item(0)->nodeValue : "";
        $set4_2 = !empty($match->getElementsByTagName("set42")->item(0)->nodeValue) ? $match->getElementsByTagName("set42")->item(0)->nodeValue : "";
        $set5_1 = !empty($match->getElementsByTagName("set51")->item(0)->nodeValue) ? $match->getElementsByTagName("set51")->item(0)->nodeValue : "";
        $set5_2 = !empty($match->getElementsByTagName("set52")->item(0)->nodeValue) ? $match->getElementsByTagName("set52")->item(0)->nodeValue : "";

        //stockage des points de jeux
        $set1g = !empty($match->getElementsByTagName("game1")->item(0)->nodeValue) ? $match->getElementsByTagName("game1")->item(0)->nodeValue : "0" ;
        $set2g = !empty($match->getElementsByTagName("game2")->item(0)->nodeValue) ? $match->getElementsByTagName("game2")->item(0)->nodeValue : "0" ;


        //stockage des points de tiebreak
        $set1_1_tb = !empty($match->getElementsByTagName("set1tb")->item(0)->nodeValue) ? $match->getElementsByTagName("set1tb")->item(0)->nodeValue : "" ;
        $set1_2_tb = !empty($match->getElementsByTagName("set2tb")->item(0)->nodeValue) ? $match->getElementsByTagName("set2tb")->item(0)->nodeValue : "" ;

        $scoreTeam1 = "  ".$set1_1." ".$set2_1." ".$set3_1." ".$set4_1." ".$set5_1." ".$set1g;
        $scoreTeam2 = "  ".$set1_2." ".$set2_2." ".$set3_2." ".$set4_2." ".$set5_2." ".$set2g;

        //Balle de service
        $balle = "<figure class='balle'></figure>";
        $balle1 = "";
        $balle2 = "";

        //service
        $match->getElementsByTagName("player2serve")->item(0)->nodeValue == "1" ? $balle1 = $balle : $balle1 = "";
        $match->getElementsByTagName("player2serve")->item(0)->nodeValue == "2" ? $balle2 = $balle: $balle2 = "";

        //stockage des données & encodage en JSON pour le traitement en AJAX    
        $data = array(
            'player1' => $player1,
            'player2' => $player2
        );    



    }//end condition matching de l'id du match

}//end foreach


echo json_encode($data);
?>


    <div id="content">
        <ul class="display_score">
            <li class="joueur" id="player_1"></li>
            <li class="balle_bg" id="balle_1"></li>
            <li class="score" id="score_1"></li>
        </ul>
        <ul class="display_score">
            <li class="joueur" id="player_2"></li>
            <li class="balle_bg" id="balle_2"></li>
            <li class="score" id="score_2"></li>
        </ul>
    </div> 

<!-- JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>
var script = "js/script.js";
$.getScript(script);
</script>




</body>
</html>


j'obtiens dans mon navigateur, une page blanche, avec tout mon code html.
et plus rien ne troune dans la console, ni dans network ...
Modifié par Deblandero (17 Jul 2018 - 09:35)
Je ne comprends pas trop ta démarche.
Soit ton script "display.php" appelé par ton script JS renvoie des données au format JSON, soit il envoie une page HTML, mais certainement pas les deux à la fois
J'ai supposé que ton premier code php était le contenu complet du script display.php et pas un extrait d'une page HTML.
Il suffit juste de rajouter vers la fin de ce code le header que je t'ai donné.

Il y a des trucs qui clochent dans ton premier script :
la variable $id_match n'est pas modifié à chaque boucle, il faut l'évaluer avant de rentrer dans le "foreach"
A modifier :
<?php
.....
// $scoreTeam1 = "  ".$set1_1." ".$set2_1." ".$set3_1." ".$set4_1." ".$set5_1." ".$set1g;
$scoreTeam1 = "  $set1_1 $set2_1 $set3_1 $set4_1 $set5_1 $set1g";
// etc...
//service
// $match->getElementsByTagName("player2serve")->item(0)->nodeValue == "1" ? $balle1 = $balle : $balle1 = "";
//service
$balle1 =  ($match->getElementsByTagName("player2serve")->item(0)->nodeValue == "1") ? $balle  :  "";
// Etc .....
?>
Merci pour ton analyse,

En faite,
je parse un XML avec 3 matches qui se jouent simultanément.
je commence avec une page index.php, qui me boucle sur les ID des match pour pouvoir "visiter" les résultats de chaque.

Pour aller les visiter, j'ai un button submit qui envoit en POST un champ hidden avec l'id du match, vers display.php.

une fois arriver sur display.php, là je check les ID des matches avec la valeur du champs hidden. Pour travailler uniquement sur les données du match choisi au préalable.

et après ça, je parse de nouveau le xml pour stocker toutes mes données, les mettres dans un tableau et les afficher au même endroit (rafraîchie via la function AJAX) dans un code html.

J'ai essayé de scinder le php et html, mais je ne voyais pas comment quitter la page php, si ce n'est que via un header('location /...'); à la fin du traitement.

Merci pour les corrections, je les fais de suite.

J'espère être le plus claire possible.
Tu mélanges la génération classique d'une page HTML par un script PHP, suite à la réception de la réponse envoyée par POST d'un formulaire et la modification de la page HTML en cours d'affichage avec de l'Ajax et la manipulation du DOM de la page avec JS après détecté l'évènement 'click' sur un élément de la page.
Les 2 méthodes sont acceptables :
- la première est une méthode classique et ne nécessite pas trop de compétences
- la deuxième s'emploie quand la page HTML est lourde ou que la connexion vers le serveur est lente. Mais elle requiert des compétences en Ajax et en manipulation du DOM de la page.

AMHA il n'est pas nécessaire que ton champ soit de type hidden.
Je suppose que le serveur *** doit être un peu long à répondre en plein tournoi et que le fichier contient tous mes matches qui t'intéressent. il est alors plus judicieux de garder une copie sur ton serveur, à rafraichir, par exemple toutes les heures ou tous les jours, et de parser le XML à partir de cette copie.
Modifié par Raphael (17 Jul 2018 - 10:28)
Merci Bazooka07,
En faite je suis dev junior, et j'ai toujours appris de dev en php.
ça fait quelques jours que j'essaye d'y intégrer du JS et notamment un peux de JQUERY avec l'AJAX.

Je vais refaire l'ensemble du projet, avec des pages bien distingues (html, php, js). Le soucis que je n'arrive pas a avoir mon tableau dans la console, vient peut-etre du faite que j'affiche sur la même page qui traite les données...

Merci pour ton conseil au niveau du serveur, mais il est impossible de faire ce que tu dis, en réalité c'est un serveur de test. Pour le jour J je récupérerai le même fichier XML mais sur un serveur privé.
Voici un exemple trivial :
Dans un même dossier ajouter les fichiers suivants :
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Test JSON avec Ajax</title>
</head><body>
	<div>
		<div>Joueur n°1 : <span id="player1"></span></div>
		<div>Joueur n°2 : <span id="player2"></span></div>
	</div>
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		$.getJSON('data.php', function (data, status, jqXHR) {
			console.log('data : ', data);
			console.log('status : ', status);
			console.log('jqXHR : ', jqXHR);

			if(status === 'success') {
				$('#player1').text(data.player1);
				$('#player2').text(data.player2);
			}
		});
	</script>
</body></html>

fichier data.php :
<?php
$datas = array(
	'player1' => 'DUPONT Jean',
	'player2' => 'MARTIN Émile'
);

header('Content-Type: application/json; charset=UTF-8');
echo json_encode($datas);
?>

jquery-3.3.1.min.js
A télécharger à : https://code.jquery.com/jquery-3.3.1.min.js

Et ouvre directement le dossier index.html dans ton navigateur

Tu peux aussi ouvrir directement le fichier data.php. Si tu as l'extension qui va bien dans ton navigateur, il affichera directement le JSON
Modifié par bazooka07 (17 Jul 2018 - 10:11)
Merci beaucoup pour ton suivis du MP Smiley cligne

Merci aussi pour ton exemple, en effet ça fonctionne super ton code.
j'essaye de garder l'idée de ton "architecture" pour mon projet.

Mais rien a faire, il reste bloqué dans la partie ERROR de ma fucntion Ajax.

pour rappel :
Le vardump en php, me donne bien mes données dans mon tableau.
Le echo json_encode($montab); m'imprime bien le tableau dans le navigateur et il est formaté en JSON
mais ma function AJAX ne le veut pas, je n'ai rien qui s'affiche en console, sauf le faite qu'il est en error, donc il ne fait pas de success.

setInterval(function(){

    $.ajax({
        type: 'GET',
        url:"./traitement.php",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        complete: function(res){
            console.log(res);
        },


        success: function (res) {

            console.log(res);

        },

        error: function(){
            console.log("error");
        }
        
    })

}, 1000)
Salut, pour recuperer des donnes en json, il ne faut pas afficher les donner. Enleve le var_dump, et fait juste echo json_encode($montab);
@Bourvil,
oui oui c'est fait, je vérifiais juste si mon tab était bien remplis avec un vardump.
mais pour l'encodage et l'envois en JSON je surprime la ligne vardump

merci Smiley smile
j'y suis arrivé ! avec l'aide d'un amis ..

j'ai donc 3 fichiers :
° index.php -> qui sert a boucler sur les id des match pour afficher un boutton pour rejoindre les données propres au match selectionné

° display. php -> qui sert a afficher les données du match sélectionné, il comporte aussi ma function JS avec l'AJAX : 

setInterval(function(){

    $.ajax({
        type: 'GET',
        url:"./traitement.php",
        dataType: "json",
        data: {
            match_id: matchID
        },
        contentType: "application/json; charset=utf-8",

        success: function (res) {
            $('#player_1').html(res[0].player1);
            $('#balle_1').html(res[0].balle1);
            $('#score_1').html(res[0].scoreTeam1);
		    $('#player_2').html(res[1].player2);
		    $('#balle_2').html(res[1].balle2);
		    $('#score_2').html(res[1].scoreTeam2);
            console.log(res);
        },
        // error: function(){
        //     console.log("error");
        // }  
    })

}, 1000)


C'est ici que je bloquais, le data: {match_id: matchID},, je ne pensais pas qu'il fallait l'envoyer d'ici, je pensais que le faite de l'envoyer dans le traitement.php suffisait. Impossible de comprendre le système à l’inverse tout seul Smiley ohwell
° traitement.php -> qui sert a faire récolter les données du xml qui seront ensuite récupérer pas la function AJAX.

Merci a vous pour votre aide !!! Smiley smile
Je crains, hélas, que tu n'as pas tout compris Smiley decu

Que vient faire "contentType: \"application/json; charset=utf-8\"" dans la fonction de setInterval(..) ?
Si tu n'as que que du texte à récupérer dans le JSON, l'emploi de $(..).text(...) est plus pertinent que $(...).html(...)

Désolé mais je n'ai pas d'exemple plus simple pour t'aider à comprendre
En effet tes remarques sont super intéressante, mais quand même assez complexe pour moi.
il faut que je vois quelques part, les base de ce "système" et la compréhension des différentes "options" que comporte une function AJAX.

"contentType: \"application/json; charset=utf-8\" je pensais que c'était important afin de ne pas avoir d'erreurs lors de la réception des données Smiley ohwell

concernant $(...).html(...) au lieu de $(...).text(...), j'imagine que avec le .html on peut lui insérer des balises HTML qui pourront être interprétée a contrario du .text qui lui retournera que le string ?

Je n'ai vraiment pas d'xp dans le JS ni le JQUERRY c'est vraiment mes débuts ... Une personne comme toi qui partage son savoir est super pour moi Smiley lol
Modifié par Deblandero (17 Jul 2018 - 14:41)
Sujet clos
Aller à