Maison > interface Web > js tutoriel > Comment corriger les erreurs de syntaxe JavaScript lors de l'analyse des données JSON rendues par Jinja ?

Comment corriger les erreurs de syntaxe JavaScript lors de l'analyse des données JSON rendues par Jinja ?

Susan Sarandon
Libérer: 2024-12-25 16:33:20
original
337 Les gens l'ont consulté

How to Fix JavaScript SyntaxErrors When Parsing Jinja-Rendered JSON Data?

JavaScript SyntaxError with Jinja-Rendered Data

Problème : Lors de la tentative d'analyse des données JSON rendues dans un Modèle HTML Jinja utilisant JavaScript, une SyntaxError est rencontrée, indiquant une erreur inattendue. Jeton '&'.

Cause : L'environnement Jinja de Flask échappe automatiquement aux données rendues dans les modèles HTML pour des raisons de sécurité. Ceci est problématique lors de la transmission d'objets JSON à JavaScript, car les caractères d'échappement interfèrent avec l'analyse.

Solution : utilisez le filtre ou le balisage tojson de Flask pour marquer les données comme sûres

Pour résolvez ce problème, utilisez le filtre tojson de Flask, qui transfère les données dans JSON et les marque en toute sécurité pour le rendu dans JavaScript.

return render_template("template.html", data=tree|tojson)
Copier après la connexion

Approches alternatives :

  • Filtre sécurisé (obsolète) : Ce filtre, bien que obsolète, marque les données comme sûr sans JSON conversion.
var data = {{ tree|safe }};
Copier après la connexion
  • Markup Wrapper : Envelopper la chaîne JSON dans le balisage avant le rendu équivaut au filtre sécurisé.
return render_template("template.html", data=Markup(json.dumps(tree)))
Copier après la connexion

Utilisation directe des données Python :

Si les données rendues ne sont pas destinées à JavaScript, pensez à transmettre les données Python directement sans utiliser de conversion ou de filtres JSON.

return render_template("template.html", data=tree)
Copier après la connexion

Mise en œuvre :

Dans le modèle Jinja :

var data = {{ data }};

for (i in obj) {
   document.write(obj[i].text + "<br />");
}
Copier après la connexion

Alternativement, les données Jinja peuvent être utilisées directement sans analyse JavaScript :

{% for item in tree %}
    <li>{{ item }}</li>
{% endfor %}
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal