用 html 数据属性中的字符串编码 JSON

Posted 2023-02-24

【中文标题】用 html 数据属性中的字符串编码 JSON

【英文标题】：Encoding JSON with strings in html data attributes

【发布时间】：2016-03-16 21:13:10

【问题描述】：

我需要将一些数据传递给 javascript。所以我创建了一个template tag：

from django.utils.safestring import mark_safe
from django import template
import json

register = template.Library()

@register.simple_tag
def mydata():
    return mark_safe(json.dumps([("a", 1), ("b", 2)])

然后在我的模板中，

<div id="mydata" data-stuff="% mydata %" style="display:none;"></div>

在加载了jquery的js文件中使用：

$('#mydata').data('stuff') //automatically does JSON.parse

问题是来自"a" 和"b" 的引号破坏了html 属性语法。我可以简单地更改为单引号 (data-stuff='% mydata %')，但是否有更明确的 django 方法将 JSON 注入模板？可能类似于 escape_my_json 或 escape_for_html_attribute 函数。

【参考方案1】：

尽管在属性中存储 json 有点麻烦，但单引号（撇号，U+0027）在JSON 中不是有效的字符串分隔符。一些浏览器可能有这个问题，虽然我不能指出任何问题。

如果 JSON 结构不复杂，则将每个字段存储为单独的数据-*，否则在 JS 中。

如果您需要使用属性...真的，真的...我不会替换引号（简单替换会很松散）更有可能使用 base64 对其进行编码。

关于转义的注意事项：要转义双引号（也可以是单引号），您可以使用过滤器 addslashes（或在 python 中 django.template.defaultfilters.addslashes），但它不支持 json 数据，因此它可能会中断。

【讨论】：

好的，所以你推荐<script>var mydata = JSON.parse('% mydata %');</script>？我很惊讶 jquery 明确地尝试将 data- 属性解析为 JSON，如果它被认为如此 hacky。另外我的意思是对属性使用单引号，而不是在 JSON 中。

即使没有 JSON.parse，因为 JSON 对象是有效的 JS 对象var mydata = % mydata %;