De PHP à JavaScript : une méthode

Version imprimable

Bonjour

Une méthode "universelle" pour passer des variables de php (Java asp ou autre) vers JavaScript

en lisant les posts j'ai vu que cette problématique revenait souvent.
comment passer des variables php à des scripts dans une page html ?

Voici donc une solution.
dans le code PHP créer un tableau associatif contenant toutes les variables à passer. si certaine variable sont des objets seule les valeurs des membres sont intéressant pour JavaScript utiliser donc get_object_vars pour obtenir un tableau de ces valeurs.
Code:

1 2 3 4 5 $scriptData = Array( 'resultCode' => 200, 'message' => "Jusqu'ici tout va bien !", 'user' => get_object_vars($mySqlQueryResult) );
placez tous ce que vous voulez avec les niveau d'imbrications de votre choix.
à la génération HTML de votre page (entre les balises <head> de préférence) ajoutez
Code:

1 2 3 <script type="text/javascript"> scriptData = <?php echo json_encode($scriptData ); ?>; </script>
vos variables sont toute disponibles dans vos JavaScript
Code:

1 2 3 4 5 6 7 8 alert(scriptData.message); document.getElementById('btn').onclick = function () { if (200 == scriptData.resultCode) { alert('user name : ' + scriptData.user.name) } else { alert('invalid Query !') } }
A+JYT

10/11/2011, 12h56
amerex
Très intéressant!
Pour les petits bouts de code à intégrer, à l'inverse, de JavaScript dans PHP, le problème est les guillemets-simples et les guillemets-doubles...

J'utilise cette technique:
Code:

1 2 3 4 5 6 7 8 <?PHP $Message = '"Hello World!"'; Print "<a href='#' onClick = 'return confirm(".$Message.");'>Test</a>"; ?>
10/11/2011, 13h50
sekaijin
Code:

1 2 3 $scriptData = Array( 'message' => "Hello World!" );
Code:

1 2 3 4 <script type="text/javascript"> scriptData = <?php echo json_encode($scriptData ); ?>; </script> <a href="#" onClick ="return confirm(scriptData.message);">Test</a>
ainsi il n'y a pas de pb de " ou '
il n'y a plus de mélange de code php avec js
car le json inclus toutes les variables php que l'on veut passer dans l'objet js scriptData
du coup coté html js il suffit d'utiliser l'objet scriptData

mieux du fait que le code js n'est pas généré il peut être dans un fichier js statique lié à la page. du coup le compilateur javascript du navigateur garde la version compilé en cache ce qui évite contrairement au script généré de le recharger et le recompiler.

A+JYT
23/01/2012, 05h26
Paul TOTH

je viens de lire l'article du magazine sur le JS embarqué...je suis partiellement d'accord avec ces affirmations.

Toutes les fonctions génériques (et il est préférable de généraliser ses fonctions) ont leur place dans des fichiers .JS, pas uniquement pour des questions de caches, mais aussi pour éviter de toujours reproduire le même code.

Par contre je doute qu'ajouter une 10ène de ligne JS dynamiques dans une page web ai une quelconque influence sur les performances du navigateur.

J'irais même jusqu'à dire que produire du JS dynamique en réponse à une requête AJAX pourra rendre la page bien plus efficace que de recharger son code HTML :)

Quand au cache, il est souvent pénible en cours de développement car justement la mise à jour des fichiers JS passe parfois inaperçue et le navigateur continue d'exploiter l'ancien code.

Par contre, je trouve le passage de variable via json assez élégant en effet.
23/01/2012, 14h07
mr_samurai
J'utilise cette technique intuitivement depuis un moment :D .

L'interet principale est de localiser les échanges de données entre PHP et JS au niveau d'un seul objet. Ainsi, la maintenance du code se trouve simplifiée.

Sur mes projet j'ai toujours quelquechose du genre:
Code:

1 2 3 4 $appDebug = true; .... $jsData = { 'debug' => $appDebug,... };
++
30/06/2012, 14h39
sekaijin

Citation:

Envoyé par Paul TOTH

je viens de lire l'article du magazine sur le JS embarqué...je suis partiellement d'accord avec ces affirmations.

Toutes les fonctions génériques (et il est préférable de généraliser ses fonctions) ont leur place dans des fichiers .JS, pas uniquement pour des questions de caches, mais aussi pour éviter de toujours reproduire le même code.

Par contre je doute qu'ajouter une 10ène de ligne JS dynamiques dans une page web ai une quelconque influence sur les performances du navigateur.

J'irais même jusqu'à dire que produire du JS dynamique en réponse à une requête AJAX pourra rendre la page bien plus efficace que de recharger son code HTML :)

Quand au cache, il est souvent pénible en cours de développement car justement la mise à jour des fichiers JS passe parfois inaperçue et le navigateur continue d'exploiter l'ancien code.

Par contre, je trouve le passage de variable via json assez élégant en effet.

je suis d'accord pour dire qu'une 10ene de lignes ne changent rien. mais cela n'apporte rien non plus.
si tu charge dans ta page un fichier js qui contient tes fonctions
lorsque tu fait ton appel ajax rien ne t'empêche de les exécuter. le serveur n'a alors pas besoin de produire dynamiquement des fonctions js en php il retourne simplement que des données en JSON

j'en profite pour rappeler que JSON ne supporte pas le transport de variables ni de fonctions
Il n'accepte que des structures et des valeurs.
http://json.org/

A+JYT

Bonjour,

Code:

1
2
3
4
5
6
7
8
   function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['name threat event', 'id of the threat event'],
          ['oi',  1000  ],
          ['2005',  1170],
          ['2006',  660],
          ['2007',  1030]
        ]);

Comment changer les chiffres pour que les elmeents de ma base de données soient mis à leur place?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
		$sql_inc="SELECT id_Evt,name_Evt FROM threat";
$res_inc=mysql_query($sql_inc);
 
 
$data_row = array();
while($rows_inc=mysql_fetch_assoc($res_inc)){
 
 $data_row[] = $rows_inc;
}
 
 
$data_set = json_encode($data_row);
 
	echo 	$data_set;
 
		?>

01/09/2013, 16h09
sekaijin
exactement comme le l'ai écrit dans mon post initial

je ne sais pas ce que contiennent tes variables mais $data_row semble être un tableau de tableau
le code que tu as écrit doit afficher dans a page quelque chose comme

Code:

[[val1, val2, val2],[....]]

tu peux donc faire
Code:

1 2 3 4 5 <script type="text/javascript"> scriptData = <?php echo json_encode($data_row ); ?>; function drawChart() { var data = google.visualization.arrayToDataTable(scriptData); }</script>
A+JYT