如何从 django.models 导入数据以在 javascript 中使用？答案

【问题标题】：How to import data from django.models, to use in javascript?如何从 django.models 导入数据以在 javascript 中使用？
【发布时间】：2020-06-10 18:19:41
【问题描述】：

我正在尝试从 moodels 导入 python 字典并在 Javascript 中操作/打印它的属性。但是，似乎什么都没有打印出来，我也没有收到任何错误警告。

Views.py

from chesssite.models import Chess_board
import json

def chess(request):
    board = Chess_board()
    data = json.dumps(board.rep)
    return render(request, 'home.html', {'board': data})

这里的 board.rep 是一个 python 字典 {"0a":0, "0b":0, "0c":"K0"} - 基本上是一个棋盘

home.html

<html>
   <body>
      {% block content %}
         <script>
            for (x in {{board}}) {
               document.write(x)
            }
         </script>
      {% endblock %}
   </body>
</html>

我也非常感谢一些调试技巧！在此先感谢亚历克斯

【问题讨论】：

标签： javascript html django django-models django-templates

【解决方案1】：

Django 默认将内容转义为 HTML，这将使 " 变为 @quot;。尝试将 {{board}} 更改为 {{board|safe}} 以防止 html 转义。或者，在视图中，您可以将字符串包装在 django.utils.safestring 中的 mark_safe() 中，以指示不应转义字符串。

【讨论】：

【解决方案2】：

要在 django 和 javascript 之间传输数据，请将数据转储到 django 视图中并加载到 javascript 变量中。尽量避免使用 javascript 语言结构进行 django 插值。它不安全，容易出错，并且可能导致复杂性。可见

data = json.dumps(board.rep)

在模板中

const data = JSON.parse('{{ data|safe }}')
// use normal javascript here. 'data' is a javascript array

for (let x of data) {
    document.write(x)
}

【讨论】：

你可以只做const data = {{ data|safe }}。将它包装成一个字符串然后再次解析它没有多大意义。此外，您需要 |escapejs 而不是 |safe 以确保引号在 JS 字符串中正确转义。