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
Susan Sarandonoriginal
2024-12-25 16:33:20365parcourir

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)

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 }};
  • 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)))

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)

Mise en œuvre :

Dans le modèle Jinja :

var data = {{ data }};

for (i in obj) {
   document.write(obj[i].text + "<br />");
}

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

{% for item in tree %}
    <li>{{ item }}</li>
{% endfor %}

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!

Déclaration:
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