[JavaScript] De PHP à JavaScript : une méthode

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

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

23/01/2012, 05h26	#4
Paul TOTH Expert Confirmé Sénior Paul TOTH Freelance Inscription : novembre 2002 Messages : 4 405 Détails du profil Informations personnelles : Nom : Paul TOTH Âge : 43 Localisation : Réunion Informations professionnelles : Activité : Freelance Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : novembre 2002 Messages : 4 405 Points : 10 758 Points : 10 758	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. __________________ Developpez.com: Mes articles, forum FlashPascal Entreprise: Execute SARL Produits : UPnP, RemoteOffice, FlashPascal Embarcadero : Ile de la Réunion, Dephi, C++Builder, RADPHP...TVA à 8,5%
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email