Existe-t-il une norme pour intégrer JSON en HTML?
j'aimerais intégrer JSON dans HTML. La solution la plus élégante que j'ai trouvée utilise le script-balise et le type mime application/json.
<script id="data" type="application/json">
{
"foo" : "bar"
}
</script>
Est-ce le niveau moyen de l'incorporation de JSON? Si non, existe-il des risques avec la solution ci-dessus?
Raisons pour utiliser inline JSON (au lieu d'un JSON-P):
- de Petites quantités de JSON-données
- moins de requêtes HTTP
- Préférence pour les données JSON en HTML-attributes
[UPDATE] raison de l'intégration de json.
j'ai un widget galerie pour un site Web avec un trafic très élevé. La galerie peut se composer d'une centaine d'images ou plus. Je veux seulement montrer une image à la fois et le reste des images sera pas chargé. Cependant l'information (image src) pour toutes les images sera rendue dans le HTML sur la charge de page. Il y a plusieurs façons de rendre l'information de l'image dans le html. Au lieu d'utiliser JSON I pourrait aussi utiliser les attributs de données html comme indiqué ci-dessous:
<li class="image" data-src="image-path.jpg">
<!-- image tag will be created here using javascript -->
</li>
résultat:
<li class="image image-loaded" data-src="image-path.jpg">
<img src="image-path.jpg" />
</li>
l'inconvénient avec la solution ci-dessus est la majoration supplémentaire. Je préférerais utiliser JSON et un moteur JavaScript-Templating tel que doT.js.
4 réponses
Raisons pour utiliser inline JSON (au lieu d'un JSON-P service)
Vous pouvez aussi inline JSON-P. OK, vous appelez juste cette méthode "script en ligne", mais elle a les avantages des deux : -)
je réponds à ma propre question puisque j'ai dû trouver une solution. Ma solution est basée sur Bergi suggère d'utiliser inline JSONP. Il s'agit d'une meilleure solution que de trouver une réponse à ma question actuelle car aucun JSON-parsing manuel n'est nécessaire.
les JSON-data (et HTML) sont générés avec les Java Server Pages (JSP).
Etape 1
un nom de variable personnalisé est créé en utilisant JSP. Il sera utilisé comme javascript variable globale à laquelle les données json sera attribué. Le nom est généré au hasard pour éviter les conflits de noms sur la même page.
<c:set var="jsonpVarName">jsnpData<%= java.lang.Math.round(java.lang.Math.random() * 1000000) %></c:set>
Etape 2
La balise script a un nom CssClass pour l'identifier et un data-var-attribut, de sorte que le nom de la variable personnalisée peut être déterminé. ${ctrl.json}JSP et imprime JSON. Contrairement à JSONP qui utilise une fonction callback, une variable globale est utilisée. Jusqu'à présent, je n'ai pas connu toutes inconvénient.
<script class="data" data-var="${jsonpVarName}" type="text/javascript">
window.${jsonpVarName} = ${ctrl.json};
</script>
Etape 3 Accéder aux données (en utilisant jQuery) est aussi simple que:
var data = window[$('script.data').data('var')];
exemple avec le contexte
HTML
<div class="myWidget">
<button class="fetchData">Fetch Data</button>
<c:set var="jsonpVarName">jsnpData<%= java.lang.Math.round(java.lang.Math.random() * 1000000) %></c:set>
<script class="data" data-var="${jsonpVarName}" type="text/javascript">
window.${jsonpVarName} = ${ctrl.json};
</script>
</div>
Javascript
$('button.fetchData', '.myWidget').click(function (e) {
var data = window[$('script.data', '.myWidget').data('var')];
});
j'utilise JSONP inline pour charger JSON-data qui est requis sur la page de chargement. Ce n'est pas beaucoup de données et c'est une requête HTTP de moins.
Ce que vous suggérez est absolument correcte. type attributs du script la balise doit être un descripteur MIME valide. Selon the official JSON RFC section 6 "IANA Considerations":
le type de média MIME pour le texte JSON est application / json.
Nom du Type: application
Nom du sous-type: json
ainsi votre HTML est valide:
<script id="data" type="application/json">
{
"foo" : "bar"
}
</script>
et non, il n'y a pas de risques supplémentaires en faisant cela.
http://json2html.com/ c'est une bonne façon de Transformer JSON, HTML.