Passage de variable json entre php et jquery

**triaguae** · 06/09/2016, 08h36

Bonjour,

Je veux passer 2 variables json de php vers jquery pour alimenter un graphique highcharts.

Je passe mes paramètres avec une chaine GET au script php, qui exécute la requête.
J’ai fait le choix d’utiliser les possibilités offertes par postgresql de retourner directement un format json : en fait je n’ai qu’une ligne de retour avec en colonne 1 un tableau de date (futur axe des x )et en colonne 2 un tableau de nombre (futur axe des y)
Quand je passe mes paramètres directement dans la barre d’adresse, le script php fonctionne, mais avec jquery rien !!

Exemple en mettant la chaine GET dans la barre d'adresse : quo_graph.php?esp=1&ana_id=1&sta_id=1&date_deb=2016-07-01&date_fin=2016-09-01
J’obtiens un retour :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

["2016-07-01","2016-07-05","2016-07-06","2016-07-07","2016-07-08","2016-07-09","2016-07-12","2016-07-13","2016-07-15","2016-07-16","2016-07-19","2016-07-20","2016-07-21","2016-07-22","2016-07-23","2016-07-25","2016-07-26","2016-07-27","2016-07-28","2016-07-29","2016-07-30","2016-08-10","2016-08-11","2016-08-12","2016-08-13","2016-08-16","2016-08-17","2016-08-18","2016-08-19","2016-08-20","2016-08-22","2016-08-23","2016-08-24","2016-08-25","2016-08-26","2016-08-27","2016-08-30","2016-08-31","2016-09-01"][7.000,25.000,150.000,124.000,64.000,2.000,660.000,606.000,416.000,500.000,47.000,461.000,126.000,385.000,527.000,448.000,471.000,536.000,358.000,225.000,67.000,160.000,172.000,776.000,644.000,167.000,538.000,325.000,248.000,51.000,149.000,522.000,619.000,717.000,600.000,435.000,33.000,21.000,2.000]

Merci de votre aide précieuse !!

Je mets les codes html jquery et php ci-dessous
Html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<title>liste analyse / stat</title>
</head>
 
<body>
	<h2>graphiques</h2>
 
 
	<form>
	<p>choisir une analyse, puis une statistique associée</p>
		<select id="analyses" name="analyses">
			<option value="">-- Analyses --</option>
		</select>
 
		<select id="stats" name="stats">
			<option value="">-- Statistiques--</option>
		</select></br></br>
 
		Date début<input  type="date" id="date_deb" name="date_deb" size="10" /></br></br>
		Date fin<input type="date" id="date_fin" name="date_fin" size="10"/></br></br>
		Espece<input id="esp" name="esp" size="5" value = "1"/></br></br>
		<input type="button" id="valider" name="valider" value="ok"/></br></br>
	</form>
 
<div id="graphique" style="width: 100%; height: 400px;"></div>
 
<script type='text/javascript' src='Highcharts-3.0.8/js/jquery.min.js'></script>
<script type="text/javascript" src="Highcharts-3.0.8/js/highcharts.js" ></script>
<script type="text/javascript" src="Highcharts-3.0.8/js/modules/exporting.js" ></script>
<script type='text/javascript' src="listes.js"></script>
<script type='text/javascript' src="quo_graph.js"></script>
 
</body>
 
</html>

Jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
$(document).ready(function(){
    // Le code jQuery ici !
 
var $valider = $('#valider');
 
 var $date_deb = $('#date_deb');
  var $date_fin = $('#date_fin');
 
//attribution de la date du jour (c'est bien compliqué !!') 
var now = new Date();
 
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
 
var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
 
$('#date_fin').val(today);
 
now.setDate(now.getDate() -90);
 
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
 
var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
 
$('#date_deb').val(today);
 
 
$valider.click(function(){
//recup des libellés pour afficher sur le graph
var $analyse_libelle = $('#analyses option:selected').text();
var $stat_libelle = $('#stats option:selected').text() ;
 
// récup des infos pour envoyer au fichier php
var $ana_id =  $('#analyses option:selected').val();
var $sta_id =  $('#stats option:selected').val();
$date_deb = $('#date_deb').val();
$date_fin = $('#date_fin').val();
var $esp = $('#esp').val();
 
 
var $chaine_get = 'esp='+$esp+'&ana_id='+$ana_id+'&sta_id='+$sta_id+'&date_deb='+$date_deb+'&date_fin='+$date_fin;
alert($chaine_get);
 $.ajax({
		url: 'quo_graph.php',
		type: 'GET',
		data: $chaine_get,
		dataType: 'json', // on veut un retour JSON
		success: function(json) {
			alert('Ce code fonctionne !');
			alert (json);
		},
		error: function(json) {
			alert('Ce code ne foctionne pas !'+json);
 
		}
	});
  $('#graphique').highcharts({
            chart: {
                zoomType: 'xy',
                spacingRight: 20
 
            },
            title: {
            //Titre du graphique
                text: $analyse_libelle
            },
 
            xAxis: {
            tickmarkPlacement: 'on',
                categories :json_ladate,
                labels: {
                 step: 2,
                rotation: 90
 
            }
                },
            yAxis: {
                title: {
                    text:''
					}            
					},
            tooltip: {
                shared: true,
                valueSuffix: ''
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    lineWidth: 1,
                    marker: {
                        enabled: false
                    },
                    shadow: false,
                    states: { hover: { lineWidth: 1  }},
                    threshold: null
                }
            },
 
            series: [{
                type: 'area',
                name: $stat_libelle,
                data: json_valeur
            }]
        }); 
 
});
});

Php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php 
require('connexion.php');
 
$requete = "select to_json(array_agg(val_date)) as json_date, to_json(array_agg(val_valeur)) as json_valeur FROM 
		( select val_date, val_valeur from tbl_valeur_val natural join tbl_stat_sta where 
		val_esp=".$_GET['esp']." and 
		val_date between '".$_GET['date_deb']."' and '".$_GET['date_fin']."' and 
		sta_id = ".$_GET['sta_id']." and 
		ana_id = ".$_GET['ana_id']." 
		ORDER BY val_date) t";
 
echo $requete.'</br>';
 
 
$resultat = pg_query($dbconn,$requete); 
 
$json_ladate = array();
$json_valeur = array();
 
$json_ladate = pg_fetch_result($resultat, 0, 0);
$json_valeur = pg_fetch_result($resultat, 0, 1);
 
echo $json_ladate;
echo $json_valeur;
 
?>

**mathieu** · 07/09/2016, 09h29

regardez la requête AJAX dans la console de développement pour voir ce qui est envoyé et reçu

**Watilin** · 07/09/2016, 10h33

Ton JSON n’est pas bien formé. En gros tu as ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[… des dates …][… des nombres …]

C’est-à-dire deux tableaux à la suite, sans séparateur entre les deux. Il faudrait que tu les encapsules, soit dans un objet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{ "dates": [ … ], "nombres": [ … ] }

soit dans un tableau :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[ [ … ], [ … ] ]

Ça va se gérer à la fin de ton script PHP, au niveau de tes deux echo.

**SpaceFrog** · 07/09/2016, 11h13

Pour être sur de récupérer un bon format de JSon le plus simple est encore de faire confiance à json_encode coté serveur.

**triaguae** · 07/09/2016, 12h27

merci à tous pour vos remarques, elles m'ont permis d'avancer pour réussir à passer le json du php au js

1-la console sous firefox est vraiment bien fichue, on voit tout ce qui se passe
2-j'ai donc modifié mon code de la manière suivante :.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php 
require('connexion.php');
 
$requete = "select to_json(array_agg(val_date)) as json_date, to_json(array_agg(val_valeur)) as json_valeur FROM 
                ( select val_date, val_valeur from tbl_valeur_val natural join tbl_stat_sta where 
                val_esp=".$_GET['esp']." and 
                val_date between '".$_GET['date_deb']."' and '".$_GET['date_fin']."' and 
                sta_id = ".$_GET['sta_id']." and 
                ana_id = ".$_GET['ana_id']." 
                ORDER BY val_date) t";
                
//echo $requete.'</br>';
 
$resultat = pg_query($dbconn,$requete); 
 
$json_ladate = array();
$json_valeur = array();
$json_graph = array();
 
$json_ladate = pg_fetch_result($resultat, 0, 0);
$json_valeur = pg_fetch_result($resultat, 0, 1);
 
$json_graph='['.$json_ladate.','.$json_valeur.']';
 
echo $json_graph;
?>

j'ai bien un retourcorrect dans la console, et le script js me dit que ça fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
		url: 'quo_graph.php',
		type: 'GET',
		data: $chaine_get,
		dataType: 'json', // on veut un retour JSON
		success: function(json) {
			alert('Ce code fonctionne !');
 
		},
		error: function(json) {
			alert('Ce code ne foctionne pas !'+json);
 
		}
	});

mais maintenant je ne trouve pas comment passé les valeurs au graphique ! :-(

**triaguae** · 07/09/2016, 13h54

je me réponds, j'ai trouvé la solution après un sandwich !

plusieurs choses n'allaient pas :
-le code du graph n'était pas dans le success de l'ajax
-la récup des données : tout simplement si on a function(data){.....}, le premier jeu de données (axes des x) est date[0] et le second (y) est data[1]

la partie ajax du js qui marche

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
30
31
32
33
34
35
36
37
 
 $.ajax({
		url: 'quo_graph.php',
		type: 'GET',
		data: $chaine_get,
		dataType: 'json', // on veut un retour JSON
		success: function(data) {
			//alert('Ce code fonctionne !');
			//alert(data);
			$('#graphique').highcharts({
 
				chart: {zoomType: 'xy',spacingRight: 20},
				title: {text: $analyse_libelle},
				xAxis: {tickmarkPlacement: 'on',categories :data[0],
					labels: {step: 2,rotation: 90}
						},
 
				yAxis: {title: {text:$stat_libelle}},
				tooltip: {shared: true,valueSuffix: ''},
				legend: {enabled: false},
				plotOptions: {area: {
								fillColor: {
									linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
									stops: [[0, Highcharts.getOptions().colors[0]],[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]]},
									lineWidth: 1,marker: {enabled: false},
									shadow: false,
									states: { hover: { lineWidth: 1  }},threshold: null}
							},
				series: [{type: 'area',name: $stat_libelle,data: data[1]}]
 
										}); 
									},
		error: function(data) {
			alert('Ce code ne fonctionne pas !');
 
		}
	});

encore merci de m'avoir fait avancer !

Passage de variable json entre php et jquery [AJAX]

jQuery

Discussions similaires

Partager

Partager