De PHP à JavaScript : une méthode [Trucs & Astuces]

**sekaijin** · 04/05/2011, 10h07

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 php :

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

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 html :

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

1
2
3
<script type="text/javascript">
  scriptData = <?php echo json_encode($scriptData ); ?>;
</script>

vos variables sont toute disponibles dans vos JavaScript

Code javascript :

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

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

**amerex** · 10/11/2011, 12h56

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 :

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

1
2
3
4
5
6
7
8
 
<?PHP
 
  $Message = '"Hello World!"';
 
  Print "<a href='#' onClick = 'return confirm(".$Message.");'>Test</a>";
 
?>

**sekaijin** · 10/11/2011, 13h50

Code php :

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

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

Code html :

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

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

**Paul TOTH** · 23/01/2012, 05h26

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.

**mr_samurai** · 23/01/2012, 14h07

J'utilise cette technique intuitivement depuis un moment

.

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 :

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

1
2
3
4
$appDebug = true;
....
 
$jsData = { 'debug' => $appDebug,... };

++

**sekaijin** · 30/06/2012, 14h39

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

**Madusa** · 23/08/2013, 15h29

Bonjour,

Code :

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

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 :

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
 
		$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;
 
		?>

**sekaijin** · 01/09/2013, 16h09

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 :

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

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

tu peux donc faire

Code :

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

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

De PHP à JavaScript : une méthode [Trucs & Astuces]

Contribuez

Discussions similaires

Partager

Partager