Récupération variable php dans javascript

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjours,

je souhaite extraire une variable d'une base de donnée et l'afficher avec javascript (pour dans un second temps faire des calculs)

cependant mon code ne marche pas. Avez vous des suggestions ?

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
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
<html>
<head>
</head>
 
<BODY>
<div>
 
<?php
//connexion a la database
$user='root';
$pass='';
$serveur='localhost';
$database='qbonneau_ptut';
 
try {
$bdd = new PDO('mysql:host='.$serveur.';dbname='.$database, $user, $pass);
}
catch (Exception $e) {
//si cela ne foncrtionne pas, on affiche un message d'erreur
    die('Erreur !: ' . $e->getMessage());
}
?>
 
<?php
//affichage database
try {
$reponse=$bdd->query('select * from velec2');
}
catch (Exception $e) {
//si cela ne foncrtionne pas, on affiche un message d'erreur
    die('Erreur !: ' . $e->getMessage());
}
?>
 
 
 
 
 
<script language="JavaScript" type="text/javascript">
function AFFICHE(somme){
   
   
   
 var somme = '<?PHP echo $distance;?>';
   
 document.getElementById('mon_div').innerHTML = 'valeur par défaut(1) : '+somme+'';
}
</script>
 
 
 
<input type="button" value="go" onclick="javascript:AFFICHE();">
 
 
<div id="mon_div"></div>
 
 
 
</body>
</html>

Salut, j’ai plusieurs remarques :

1. « Ça ne marche pas » n’est pas une description valable du problème.

2. Ta variable $distance n’est définie nulle part. PHP devrait émettre un avertissement. Si tu ne le vois pas, il faut ajouter une directive error_reporting au début de ton fichier. Dans ton environnement de développement, tu dois activer toutes les options de débug pour avoir un maximum d’informations, et faire tout ton possible pour gérer la source des messages d’erreur/avertissement plutôt que les ignorer.

3. on ne met pas javascript: dans un onclick. D’ailleurs, aujourd’hui, on ne met plus javascript: nulle part.

4. Par défaut, PDO ne fait pas remonter les erreurs SQL, il faut aller les chercher à la main. Tu peux modifier ce comportement et faire en sorte que les erreurs SQL lèvent des exceptions :

Code:

$bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

5. Je te conseille vivement de t’occuper dès maintenant de l’encodage utilisé par les différentes parties de l’application avant que ça ne devienne un problème, car crois-moi, ça va devenir un problème tôt ou tard.
Pour ça tu dois faire au minimum trois choses :

Ajouter une déclaration charset dans ton HTML :

Code:

<meta charset="utf-8">

Spécifier le charset lors de la connexion à ta BDD :

Code:

$bdd = new PDO("mysql:host=$serveur;dbname=$database;charset=utf8", $user, $pass);

Vérifier que ton éditeur de texte ou IDE est bien configuré pour enregistrer les fichier en UTF-8. Tu peux utiliser le plugin très utile editorconfig pour ne pas avoir à y penser à chaque fois.
Voir Passer à UTF-8 sans manquer une étape pour plus de détails.

6. Si tu ne le sais pas déjà, ton navigateur a une console qui te permet de voir les erreurs JavaScript. Il faut appuyer sur F12 pour ouvrir les outils de développment, et ensuite aller sur l’onglet console.

7. En général, il vaut mieux éviter de mettre des bouts de PHP au milieu du code JavaScript. Là tu peux te le permettre car ton cas est simple, mais ne prends pas l’habitude : si tu fais ça, les choses peuvent devenir très vite compliquées.
Il vaut mieux avoir des fichiers JS statiques (c’est-à-dire ici, pas générés par PHP) et, quand on a besoin d’une information du serveur, la récupérer avec une requête ajax. La fonction json_encode peut être utile.

8. Le mode strict de JavaScript corrige une partie des vieux défauts du langage. C’est une bonne chose à adopter, que l’on soit débutant ou pas.

Voilà ma version de ton code qui résume mes remarques ; tu noteras que je n’ai pas corrigé le problème de $distance.
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <?php error_reporting(-1); // affiche tous les messages d’erreur/avertissement //connexion a la database $user = 'root'; $pass = ''; $serveur = 'localhost'; $database = 'qbonneau_ptut'; try { $bdd = new PDO("mysql:host=$serveur;dbname=$database;charset=utf8", $user, $pass); } catch (PDOException $e) { die('Erreur de connexion à la BDD : ' . $e->getMessage()); } // configure PDO pour que les erreurs SQL lèvent des exceptions $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); //affichage database try { $reponse = $bdd->query('SELECT * FROM velec2'); } catch (PDOException $e) { die('Erreur de requête SQL : ' . $e->getMessage()); } ?> <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Quentin_B</title> </head> <body> <input type="button" value="go"> <div id="mon_div"></div> <script type="text/javascript"> 'use strict'; function AFFICHE() { var somme = '<?= $distance ?>'; document.getElementById('mon_div').textContent = 'valeur par défaut(1) : ' + somme + ''; } document.querySelector('input[type="button"][value="go"]').onclick = AFFICHE; </script> </body> </html>

18/02/2017, 22h07
Invité

Bonjour,

À mon avis, c'est Ajax qu'il te faut...

...Auquel cas PHP et JS sont dans des fichiers distincts.

Merci Watilin, j'ai pris compte de tes remarques et j'ai modifié le code, cependant lorsque je le lance, la variable distance me retourne 1 alors que ce n'est pas du tout la valeur de la base de donnée. Savez vous d'ou le problème peut-il venir ?

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<?php
error_reporting(-1); // affiche tous les messages d’erreur/avertissement
 
//connexion a la database
$user = 'root';
$pass = '';
$serveur = 'localhost';
$database = 'velec3';
 
try {
  $bdd = new PDO("mysql:host=$serveur;dbname=$database;charset=utf8", $user, $pass);
}
catch (PDOException $e) {
  die('Erreur de connexion à la BDD : ' . $e->getMessage());
}
 
// configure PDO pour que les erreurs SQL lèvent des exceptions
$bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
//affichage database
try {
  $reponse = $bdd->query('SELECT * FROM velec3');
}
catch (PDOException $e) {
  die('Erreur de requête SQL : ' . $e->getMessage());
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Vélo Electrique</title>
</head>
<body>
 
<input type="button" value="go">
 
<div id="mon_div"></div>
 
<script type="text/javascript">
  'use strict';
 
  function AFFICHE() {
    var somme = '<?= $distance = $bdd->query("SELECT distance FROM velec3 where parcours=1") or die(print_r($distance->errorInfo())); ?>';
    document.getElementById('mon_div').textContent = 'valeur par défaut : ' + somme + '';
  }
 
  document.querySelector('input[type="button"][value="go"]').onclick = AFFICHE;
</script>
</body>
</html>

21/02/2017, 15h01
Invité
Bonjour,

Code:

$distance = $bdd->query("SELECT distance FROM velec3 where parcours=1")

D'après toi, ça renvoie quoi ?

Avant d'envisager mettre quoi que ce soit dans JavaScript, sais-tu au moins :
- faire une requête PDO ?
- afficher les données ?
21/02/2017, 15h03
Quentin_B

Bonjours,
Pour moi cela devrait renvoyer la valeur contenue dans la base non ?
21/02/2017, 15h25
Invité
Bon, manifestement, il te manque les bases :
- Comprendre PDO
21/02/2017, 15h30
Invité
Quelques fonctions utiles :
- ->fetch()
- ->fetchAll()
- ->rowCount()
- ...
23/02/2017, 14h42
Quentin_B

Bonjours,
j'ai fait des test avec ces fonctions mais aucune ne retourne le résultat attendu.
23/02/2017, 14h50
Invité

Bonjour,

on doit deviné, ou tu penses nous montrer les codes de tes tests ? :aie:
23/02/2017, 14h57
Quentin_B

je ne comprend tout simplement pas ou se trouve la faute dans mon précédant code

Pour ça, il faudrait déjà suivre les liens qu'on te donne, et LIRE...

En voici un autre :

PDO query()

Citation:

retourne un objet PDOStatement, ou FALSE si une erreur survient.

Voir aussi l'exemple (que je reprends et simplifie ci-dessous) :

Code:

1
2
3
4
5
6
7
8
9
10
// la requête
$sql =  "SELECT name, color, calories 
   FROM fruit ORDER BY name"; 
 
// pour CHAQUE ligne de résultat
foreach  ($conn->query($sql) as $row) { 
        echo $row['name'] . "\t"; // affiche le champ 'name' de la ligne
        echo $row['color'] . "\t";
        echo $row['calories'] . "\n";
}

Pour récupérer des résultats selon un PARAMETRE "EXTERNE" (par exemple, reçu en $_POST ou $_GET), on va utiliser une requête préparée (PROTECTION !) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// la requête
$sql =  "SELECT name, color, calories 
   FROM fruit ORDER BY name 
   WHERE color = :colorrecu "; 
 
// on PREPARE la requête
$pdo_select = $conn->prepare($sql); 
 
// on exécute la requête ,en reliant le PARAMETRE externe
$pdo_select->execute( array(
    ':colorrecu' => $_POST['colorrecu']
   ) ); 
 
// Affichage des résultats
foreach  ( $pdo_select->fetch() as $row) { 
        echo $row['name'] . "\t"; // affiche le champ 'name' de la ligne
        echo $row['color'] . "\t";
        echo $row['calories'] . "\n";
}

C'est bon ?

Bonjours,
lorsque j'adapte le programme, j'obtient le message d'erreur suivant:

Citation:

Undefined variable: conn in <b>C:\Program Files (x86)\EasyPHP-DevServer-14.1VC9\data\localweb\my portable files\new 1.php</b> on line <b>47</b><br />
<br />
<b>Fatal error</b>: Call to a member function prepare() on a non-object in <b>C:\Program Files (x86)\EasyPHP-DevServer-14.1VC9\data\localweb\my portable files\new 1.php</b> on line <b>47</b><br />

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
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
<?php
error_reporting(-1); // affiche tous les messages d’erreur/avertissement
 
//connexion a la database
$user = 'root';
$pass = '';
$serveur = 'localhost';
$database = 'velec3';
try {
  $bdd = new PDO("mysql:host=$serveur;dbname=$database;charset=utf8", $user, $pass);
}
catch (PDOException $e) {
  die('Erreur de connexion à la BDD : ' . $e->getMessage());
}
 
// configure PDO pour que les erreurs SQL lèvent des exceptions
$bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
//affichage database
try {
  $reponse = $bdd->query('SELECT * FROM velec3');
}
catch (PDOException $e) {
  die('Erreur de requête SQL : ' . $e->getMessage());
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Vélo Electrique</title>
</head>
<body>
 
<input type="button" value="go">
 
<div id="mon_div"></div>
 
<script type="text/javascript">
  'use strict';
 
  function AFFICHE() {
    var somme = <?= 
$distance =  "SELECT distance from velec3 where parcours =1 limit 1 "; 
 
 
$pdo_select = $conn->prepare($distance); 
 
 
$pdo_select->execute( array(
    ':distance' => $_POST['distance']
   ) );
 
            ?>
 
    document.getElementById('mon_div').textContent = 'valeur par défaut : ' + somme + '';
  }
 
  document.querySelector('input[type="button"][value="go"]').onclick = AFFICHE;
</script>
</body>
</html>

09/03/2017, 17h06
Invité

Bonjour,

et ça t'étonne ?

Ta connexion s'appelle $bdd... :aie:

Bonjour,
j'ai corrigé l'erreur mais ceci s'affiche: Uncaught SyntaxError: Unexpected token < sur la ligne 44

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
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
<?php
error_reporting(-1); // affiche tous les messages d’erreur/avertissement
 
//connexion a la database
$user = 'root';
$pass = '';
$serveur = 'localhost';
$database = 'velec3';
try {
  $bdd = new PDO("mysql:host=$serveur;dbname=$database;charset=utf8", $user, $pass);
}
catch (PDOException $e) {
  die('Erreur de connexion à la BDD : ' . $e->getMessage());
}
 
// configure PDO pour que les erreurs SQL lèvent des exceptions
$bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
//affichage database
try {
  $reponse = $bdd->query('SELECT * FROM velec3');
}
catch (PDOException $e) {
  die('Erreur de requête SQL : ' . $e->getMessage());
}
?>
 
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Vélo Electrique</title>
</head>
<body>
 
<input type="button" value="go">
 
<div id="mon_div"></div>
 
<script type="text/javascript">
  'use strict';
 
  function AFFICHE() {
    var somme = <? =
$sql =  "SELECT distance from velec3 where parcours =1 limit 1 "; 
 
 // on PREPARE la requête
$pdo_select = $bdd->prepare($sql); 
 
// on exécute la requête ,en reliant le PARAMETRE externe
$pdo_select->execute( array(
    ':distance' => $_POST['distance']
   ) ); 
            ?>
         
    document.getElementById('mon_div').textContent = 'valeur par défaut : ' + somme + '';
  }
  
  
  document.querySelector('input[type="button"][value="go"]').onclick = AFFICHE;
</script>
</body>
</html>

11/03/2017, 22h21
ABCIWEB

Salut,

Concernant ta requête php, une fois exécutée, il faudrait exploiter le résultat...

Mais sur le principe ta fonction javascript AFFICHE ne pourra pas fonctionner onclick car le code php n'est exécuté que côté serveur et javascript ne fonctionne que côté client dans le navigateur.

jreaux62 t'a déjà indiqué qu'on se sert d'Ajax dans ces cas là. Il faut suivre des tutos pour savoir faire des requêtes ajax et comprendre comment insérer le résultat dans ton html.

Sinon tu peux tout faire en php, mais chaque nouveau résultat onclick va demander le rafraichissement de la page complète.
12/03/2017, 13h47
Quentin_B

bonjour,
merci pour ton aide, quelles commandes dois-je utiliser pour tout faire en php ?

Faudrait déjà que l'on sache ce que tu veux faire.

Y-a-t-il un choix à faire de la part du visiteur pour afficher ces données ?

Si oui et que tu veux tout faire en php il faut faire un formulaire avec au moins un champ de saisie. A la soumission du formulaire la valeur choisie sera envoyée à l'adresse indiquée dans la balise action du formulaire et tu pourras récupérer ces valeurs en php avec $_GET ou $_POST. Faut faire des tutos sur les formulaires PHP.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <?php $champ_texte = ''; if(isset($_POST['toto'])) { $champ_texte = $_POST['toto']; } ?> <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>Test formulaire</title> </head> <body>  <form action="#" method="post"> <input type="text" name="toto"/> <input type="submit" value="Envoyer" /> </form> <div>Affiche la variable $champ_texte avec php: <?=$champ_texte?></div> </body> </html>
Evidemment plutôt que de faire afficher la variable $champ_texte il faudrait t'en servir pour faire ta requête.

Javascript serait plus souple car il permettra d'afficher le résultat sans besoin de rafraichir la page avec des requêtes ajax.

13/03/2017, 10h12
Quentin_B

Bonjour,
merci pour ton aide, mon but est juste de recuperer une variable php et de l'utiliser pour un calcul simple et de l'afficher sur clic.
13/03/2017, 12h11
Invité
Bonjour,

tu es bien gentil, mais il faudrait être un peu plus précis.
- 1/ Récupérer des données depuis la BdD : c'est du basique PHP.
- 2/ Faire un calcul : idem, ça peut se faire en PHP
- 3/ afficher le résultat : basique aussi en PHP (seul le "sur clic" peut nécessiter un peu de JavaScript)
Donc AUCUNE difficulté là-dedans.

Alors :
- qu'est-ce que tu n'arrives pas à faire ?
- qu'est-ce que tu SAIS faire ?
- quel est ton code actuel ?
- AS-TU LU DES TUTOS ?
- ... ??

Voir 40 message(s) de cette discussion en une page