29

我正在使用 Django 为项目创建基于 Web 的应用程序，并且遇到了将数组从 Django 视图返回到模板的问题。

JavaScript (JQuery) 脚本将使用该数组在页面中显示的图像上绘制框。因此，除其他外，该数组将具有要绘制的框的坐标。

这是 Django 视图中用于获取所需数据并将其序列化为 JSON 的代码：

def annotate(request, ...):
    ...
    oldAnnotations = lastFrame.videoannotation_set.filter(ParentVideoLabel=label)
    tags = serializers.serialize("json", oldAnnotations)
    ...
    return render_to_response('vannotate.html', {'tags': tags, ...})

作为一种调试方式，{{ tags }}在模板的 HTML 部分中使用会将其作为输出（对不起，很长的一行）：

[{"pk": 491, "model": "va.videoannotation", "fields": {"ParentVideoFile": 4, "ParentVideoFrame": 201, "ParentVideoLabel": 4, "top": 220, "height": 30, "width": 30, "ParentVideoSequence": 16, "left": 242}}, {"pk": 492, "model": "va.videoannotation", "fields": {"ParentVideoFile": 4, "ParentVideoFrame": 201, "ParentVideoLabel": 4, "top": 218, "height": 30, "width": 30, "ParentVideoSequence": 16, "left": 307}}]

我认为这是 JSON 数组的正确格式。

稍后在模板中，我尝试在模板tags的 JavaScript 部分中实际使用该变量，如下所示：

{% if tags %}
  var tagbs = {{ tags|safe }};
  var tgs = JSON.parse(tagbs);
  alert("done");
{% endif %}

如果我删除该var tgs = JSON.parse(tagbs);行，则会弹出警告框，并且 JavaScript 的其余部分按预期工作。然而，留下这一行会破坏脚本。

我希望能够遍历 Django 模型中的所有对象并获取 JavaScript 中字段的值。

我不确定我在这里做错了什么，有人可以指出正确的方法吗？

4

3 回答 3

43

编辑 Django 2.1+ 和现代网络的更新：

这样做的现代方法是：

1) 将原始数据传递给模板，而不是 JSON 序列化数据。IE：

def annotate(request, ...):
    ...
    oldAnnotations = lastFrame.videoannotation_set.filter(ParentVideoLabel=label)
    ...
    return render_to_response('vannotate.html', {'tags': oldAnnotations, ...})

2) 在您的模板中，使用新的“json_script”过滤器来包含 JSON 数据：

{{ tags|json_script:"tags-data" }}

这将产生如下所示的 HTML：

<script id="tags-data" type="application/json">{"foo": "bar"}</script>

该标签对包含“</script>”的字符串进行了特殊处理，以确保它们正常工作。

3) 在您的 Javascript 代码中，获取标签数据，如下所示：

var tags = JSON.parse(document.getElementById('tags-data').textContent);

4) 将您的 Javascript 代码移动到外部 .js 文件，并设置 Content-Security-Policy 标头以禁止内联 Javascript，因为它存在安全风险。请注意，由于 json_script 标记生成 JSON，而不是 Javascript，因此它是安全的，并且无论您的 Content-Security-Policy 设置如何都是允许的。

原答案：

警告：如果任何字符串是用户控制的，这是不安全的

JSON是Javascript 源代码。即数组的JSON 表示是定义数组所需的Javascript 源代码。

所以之后：

var tagbs = {{ tags|safe }};

tagbs是一个包含你想要的数据的 JavaScript 数组。无需调用 JSON.parse()，因为 Web 浏览器已经将其解析为 JavaScript 源代码。

所以你应该能够做到

var tagbs = {{ tags|safe }};
alert(tagbs[0].fields.ParentVideoFile);

那应该显示“4”。

警告：使用这种旧方法，包含“</script>”的字符串将不起作用，它们会出错。这是因为浏览器会将 </script> 视为脚本的结尾。如果任何字符串是用户输入的数据，则这是一个可利用的安全漏洞 -请参阅此处的评论 14 了解更多详细信息。请改用上面更现代的方法。

于 2013-03-23T22:36:34.427 回答
4

您想对模板中的数据进行 JSON 化；JSON 实际上已经是 Javascript（它是一个子集：

{% if tags %}
  var tgs = {{ tags }};
{% endif %}

请注意，这tags已经是 JSON（因此是 JavaScript）数据，可以直接插入；无需转义（这里没有 HTML，而是 JavaScript）。

或者您可以使用这个Django 片段并直接在模板中执行（无需serializers.serialize在annotate方法中调用）：

var tgs = {{ tags|jsonify }};
于 2013-03-23T22:36:24.250 回答
2

您也可以使用simplejsonfrom django.utils。像：

oldAnnotations = lastFrame.videoannotation_set.filter(ParentVideoLabel=label)
dump = simplejson.dumps(oldAnnotations)

return HttpResponse(dump, mimetype='application/json')

您可以从 JS 端解析和访问其中的所有数据。

于 2013-03-23T23:47:05.100 回答