11484 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Impossible de m'en sortir dans ce passage de variable j'ai essayé plein de choses... C'est pourtant un normalement quelque chose de pas compliqué...

J'aimerais passer une variable : SerialNumberJS qui se trouve dans le JS (Que je récupère via l'URL : fonction getUrlParameter) vers le fichier PHP ! Cette variable va être utilisée ensuite dans le PHP pour faire une requête en base. Puis revenir vers le JS pour afficher un graph!

De l'aide s'il vous plait Smiley smile

Resultat du code : Après avoir le message d'alerte success du GET j'ai plus rien ... Rien dans la console ni de graph ! Pourquoi?

Si je définie dans le .php $SerialNumber à une valeur, le graph s'affiche ... Il y a un problème dans le passage de variable... !

Code JS:


$(document).ready(function() {

	function getUrlParameter(name) {
    	name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    	var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    	var results = regex.exec(location.search);
    	return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
	};

	var SerialNumberJS = getUrlParameter('SerialNumber'); 
	console.log(SerialNumberJS);

    $.ajax({
        url: 'graphdata.php',
        type: "GET",
        data: {'SerialNumberPHP' : SerialNumberJS},
        success: function(){
            alert(SerialNumberJS);

            $.ajax({
			url : "graphdata.php",
			type : "GET",
			success : function(data){
				console.log(data);

				var heure = [];
				var payload = [];

				for(var i in data) {
					heure.push("Heure " + data[i].heure);
					payload.push(data[i].payload);
				}

				var chartdata = {
					labels: heure,
					datasets: [
						{
							label: "payload",
							fill: false,
							lineTension: 0.1,
							backgroundColor: "rgba(59, 89, 152, 0.75)",
							borderColor: "rgba(59, 89, 152, 1)",
							pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
							pointHoverBorderColor: "rgba(59, 89, 152, 1)",
							data: payload
						}
					]
				};

				var ctx = $("#mycanvas");

				var LineGraph = new Chart(ctx, {
					type: 'line',
					data: chartdata
				});
			},

			error : function(data) {

			}
			});
        }
    });
});



<?php

//setting header to json
header('Content-Type: application/json');

//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '***');
define('DB_NAME', 'delta');

//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

if(!$mysqli){
	die("Connection failed: " . $mysqli->error);
}

//$SerialNumber = "00000000010";
$SerialNumber = $_GET['SerialNumberPHP'];

//query to get data from the table
$query = 'SELECT heure, payload FROM reception WHERE Serial_number = "'.$SerialNumber.'" ORDER BY date DESC LIMIT 10';

//execute query
$result = $mysqli->query($query);

//loop through the returned data
$data = array();
foreach ($result as $row) {
	$data[] = $row;
}
//free memory associated with result
$result->close();

//close connection
$mysqli->close();

//now print the data
print json_encode($data);
?>


Sani300
Modifié par Sani300 (02 Sep 2017 - 16:47)
Salut Sani300,
tu as une petite erreur de syntaxe dans ta commande ajax : il faut que tu ajoutes un paramètre à la fonction success dans lequel la réponse de ta requête ajax sera renvoyée et que tu pourras donc utilisé dans la fonction success avec succès!:)
Je n'ai contrôlé tout le code mais si as tu as encore des soucis n'hésite pas...
Bonne continuation,
GJboba


success: function(SerialNumberJS){
            alert(SerialNumberJS);
Salut GJboba!

Merci pour ta réponse !

Si j'ajoute "SerialNumberJS" dans fonction, le message d'alerte me remontre ça : "[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" ...

Je comprends pas tellement... !

Et j'ai cette erreur : responseText : "<br />?<font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'>?<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined index: SerialNumberPHP in C:\wamp64\www\Delta-Agriculture\sensors\graphdata.php on line <i>20</i></th></tr>?<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>?<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>?<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0006</td><td bgcolor='#eeeeec' align='right'>244296</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\wamp64\www\Delta-Agriculture\sensors\graphdata.php' bgcolor='#eeeeec'>...\graphdata.php<b>:</b>0</td></tr>?</table></font>?[]
Modifié par Sani300 (02 Sep 2017 - 17:28)
Je dirais que c'est un tableau des objets (enregistrements) retournés par ta requête!
La fonction Alert ne peux pas l'afficher ...
Ce que tu peux faire du coté php :
utilise la commande si dessous à la place de ton foreach pour récupérer les enregistrements dans un tableau associatif qui pourra être traduit en JSON :

while ($row = $result->fetch_assoc()) {
            $rows[] = $row;
        }


J'ai pas vérifié si cela fonctionne mais j'ai relu du code que j'ai fait il y a quelques mois...
Bon courage,
GJboba
J'ai toujours le même problème. Je ne pense pas que le problème vienne du JSON mais plutôt de la variable "SerialNumber" Récupéré. Si je la set a une valeur dans le PHP tout se passe bien ! La requête SQL est faite et le graph s'affiche !
En effet j'ai fait un test et la modification que je t'ai conseillée ne change rien.
Ce que tu peux faire c'est visualiser sur la console le contenu de la variable SerialNumberJS
à la place du alert : console.log(SerialNumberJS)
J'ai relu ton code et je ne comprend pas pourquoi tu as 2 requêtes ajax imbriquées?

$.ajax({
        url: 'graphdata.php',
        type: "GET",
        data: {'SerialNumberPHP' : SerialNumberJS},
        success: function(){
            alert(SerialNumberJS);

            $.ajax({
			url : "graphdata.php",
			type : "GET",
			success : function(data){
				console.log(data);

				var heure = [];
				var payload = [];
Parce qu'il faut d'abord recupérer la variable "SerialNumber" pour pouvoir faire une requête SQL via PHP pour avoir les valeurs a afficher dans le graph. Puis avec la seconde ajax on affiche le graph !
En changeant un peu la manière du code j'arrive a passer le SerialNumber, mais maintenant je n'arrive plus a renvoyer les informations au JS pour afficher le graph.... Smiley bigcry Smiley bigcry

Code PHP :
<?php
if(isset($_POST['SerialNumber']))
{
    $SerialNumber = $_POST['SerialNumber'];
    //echo ($SerialNumber);

    //setting header to json
    header('Content-Type: application/json');

	//database
	define('DB_HOST', 'localhost');
	define('DB_USERNAME', 'root');
	define('DB_PASSWORD', '*****');
	define('DB_NAME', 'delta');

	//get connection
	$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

	if(!$mysqli){
		die("Connection failed: " . $mysqli->error);
	}

	//query to get data from the table
	$query = 'SELECT heure, payload FROM reception WHERE Serial_number = "'.$SerialNumber.'" ORDER BY date DESC LIMIT 10';

	//execute query
	$result = $mysqli->query($query);

	//loop through the returned data
	$data = array();
	foreach ($result as $row) {
		$data[] = $row;
	}

	print_r($data);
	//free memory associated with result
	$result->close();

	//close connection
	$mysqli->close();

	//now print the data
	print json_encode($data);
}else{
	//echo("empty");
}

?>


Code JS :
$(document).ready(function(){

	function getUrlParameter(name) {
    	name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    	var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    	var results = regex.exec(location.search);
    	return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
	};

	var SerialNumber = getUrlParameter('SerialNumber'); 

	var http = new XMLHttpRequest();
	var url = "graphdata.php";
	var params = ("SerialNumber=" +SerialNumber);
	http.open("POST", url, true);
	http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

	http.onreadystatechange = function() {//Call a function when the state changes.
		if(http.readyState == 4 && http.status == 200) {
			alert(http.responseText);
		}
	}
	http.send(params);


	$.ajax({
		url : "graphdata.php",
		type : "GET",
		success : function(data){
			//alert("success Graph!");
			//console.log(data);
			//alert(data);

			var heure = [];
			var payload = [];

			for(var i in data) {
				heure.push("Heure " + data[i].heure);
				payload.push(data[i].payload);
			}

			var chartdata = {
				labels: heure,
				datasets: [
					{
						label: "payload",
						fill: false,
						lineTension: 0.1,
						backgroundColor: "rgba(59, 89, 152, 0.75)",
						borderColor: "rgba(59, 89, 152, 1)",
						pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
						pointHoverBorderColor: "rgba(59, 89, 152, 1)",
						data: payload
					}
				]
			};

			var ctx = $("#mycanvas");

			var LineGraph = new Chart(ctx, {
				type: 'line',
				data: chartdata
			});
		},
		error : function(data) {
			alert("Error Graph");
		}
	});
});
et tu appels 2 fois graphdata.php?

Si dans ton premier appel tu fais la bonne syntaxe de la fonction success ( success: function(le_resultat_du_print_dans_le_php) ) comme tu as fait d'ailleurs correctement pour l'appel imbriqué, tu n'as pas à faire un second appel!

Enfin il me semble...?

En résumé :

$(document).ready(function() {

function getUrlParameter(name) {
         name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
         var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
         var results = regex.exec(location.search);
         return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

var SerialNumberJS = getUrlParameter('SerialNumber'); 
console.log(SerialNumberJS);

$.ajax({
	url: 'graphdata.php',
	type: "GET",
	data: {'SerialNumberPHP' : SerialNumberJS},  //le parametre envoye à graphdata.php
	success: function(data){
				//Gestion de la réponse "data" renvoyée par graphdata.php
				console.log(data);

						var heure = [];
						var payload = [];

						for(var i in data) {
								heure.push("Heure " + data[i].heure);
								payload.push(data[i].payload);
						}

						var chartdata = {
								labels: heure,
								datasets: [
										{
												label: "payload",
												fill: false,
												lineTension: 0.1,
												backgroundColor: "rgba(59, 89, 152, 0.75)",
												borderColor: "rgba(59, 89, 152, 1)",
												pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
												pointHoverBorderColor: "rgba(59, 89, 152, 1)",
												data: payload
										}
								]
						};

						var ctx = $("#mycanvas");

						var LineGraph = new Chart(ctx, {
								type: 'line',
								data: chartdata
						});
				},
	error : function(data) {

			}
	});
});


Bonne soirée
Oui ta version passe aussi bien le serialnumber, mais le graphique ne s'affiche plus ... ! Si tu regardes dans la console, rien ne passe avec le json_encoder... !
Pourquoi? Je ne sais pas... ! Alors que si tu fait un print_r du tableau avant on a les bonnes valeurs !
As-tu testé sans mettre le print_r car en faisant cela en plus de ton print json tu n'envois plus du JSON "bien formé"!
exemple:
si tu écris :
print_r('{"monchamp": "mavaleur"}');
print json_encode('{"monchamp": "mavaleur"}');

tu n'auras rien à l'arrivée car {"monchamp": "mavaleur"}{"monchamp": "mavaleur"} ce n'est pas au format JSON
Modifié par GJboba (02 Sep 2017 - 23:02)