将 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 返回解析错误：

[{"fruit": "apple", "amount": 3}, {"fruit": "pear", "amount": 1}, {"fruit": "kiwi", "amount": 2}] 演示:1 Uncaught SyntaxError: Unexpected token & in JSON at position 2 at JSON.parse () at demo: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>&nbsp; &nbsp; doSomethingWith({{ user.username|tojson|safe }});</script>