将 json 字符串从 python 应用程序发送到 jinja 模板中的 javascript

Question

我正在尝试使用 web 服务器上的 Flask 从 python 发送一个列表到带有 jinja 和 javascript 的客户端。使用 json 应该很简单。这是我的python代码：

@app.route("/demo")
def demo():
    basket = [{"fruit": "apple", "amount": 3}, {"fruit": "pear", "amount": 1}, {"fruit": "kiwi", "amount": 2}]
    return render_template("demo.html", basket=json.dumps(basket))

这是一个简化的代码，在最终程序中，列表将是数据库查询的结果。 jinja模板如下：

{% extends "layout.html" %}

{% block title %}
    Demo
{% endblock %}

{% block main %}
    <script>
        console.log('{{ basket }}');
        object = JSON.parse('{{ basket }}')
    </script>

{% endblock %}

但是，javascript 返回一个解析错误：

[{“水果”：“苹果”，“数量”：3}，{“水果”：“梨”，“数量”：1}，{“水果”：“猕猴桃”，“数量”：2 }] demo:1 Uncaught SyntaxError: Unexpected token & in JSON at position 2 在 JSON.parse() 在演示：54

似乎双引号 " 以某种方式转换为 HTML 代码 " 的 " 字符。随后 JSON.parse 无法处理。尝试将列表分解为两个数组“fruit”和“amount”，同样的错误。我猜客户端不知道我正在发送 json 并且我应该将 content-type 设置为 application/json。是这样吗？如果是，我应该如何以及在哪里执行此操作？

Makozaki 回答后的更新： 将“篮子”作为 python 对象（而不是 json 对象）与 jinja for 循环结合使用，但前提是您重建单个元素的数组：

<script>
    fruit = [];
    {% for item in basket %}
        fruit.push('{{ item["fruit"] }}')
    {% endfor %}
    console.log(fruit)
</script>

尝试推送由“fruit”和“amount”组成的项目将再次包含所有转义字符。而且，您必须重新构建一个作为对象整体传递的数组，这似乎很愚蠢。

关闭自动转义也可以，但以一种意想不到的方式：

<script>
    {% autoescape false %}
        object = {{ basket }};
    {% endautoescape %}
</script>

这将准确返回传递的对象。但有趣的是：你必须省略双花括号前后的单引号！ （与前面的例子相反）

感谢您的启发！

Answer 1

简而言之，object|tojson|safe 就是这样做的方法，例如来自JSON Support。

<script type=text/javascript>
    doSomethingWith({{ user.username|tojson|safe }});
</script>