我想在客户端使用 Javascript 做一些事情。我在我的 View 中以 JSON 格式从我的模型序列化一个查询集,并将其发送到模板。
data = serializers.serialize("json", Profile.objects.filter(user_id=self.request.user))
我的结局是:
var data = '[
{
"model": "accounts.profile",
"pk": 14,
"fields": {
"user": 14,
"email_confirmed": true,
"encrypted_private_key": "Z0FBQUFBQmJLQT09",
"public_key": "LS0tLSS0tLQo=",
"salt": "I8rzovcWsKm4G5Pj3E4DMw=="
}
}
]';
当我尝试做的时候:
var data = JSON.parse('{{ data|safe }}');
我得到一个错误
Uncaught SyntaxError: Unexpected token { in JSON at position 1
有人能帮忙吗?
最佳答案
你的字符串包含换行符,所以
var data = JSON.parse('{{ data|safe }}');
是行不通的。尝试使用反引号(不确定如何在此处输入它们)而不是 '
。
但是,如果你已经把数据dump成了json,就不需要在JS端解析了,直接做
var data = {{ data|safe }};
更新:注意,上面的模板变量没有引号,上面会变成(查看源代码):
var data = [
{
"model": "accounts.profile",
"pk": 14,
"fields": {
"user": 14,
"email_confirmed": true,
"encrypted_private_key": "Z0FBQUFBQmJLQT09",
"public_key": "LS0tLSS0tLQo=",
"salt": "I8rzovcWsKm4G5Pj3E4DMw=="
}
}
];
请注意,仍然没有引号。这是有效的 Javascript,无需进一步操作(即解析)。
update2:要在 .js 文件中使用此数据,您需要像这样更改 .js 文件:
var some_unique_name = function (data) {
... original code goes here ...
};
在你的 html 中:
<script src="...your script"></script>
<script>
some_unique_name({{ data|safe }});
</script>
update3:上面的内容将扩展为(使用浏览器的查看源代码功能检查):
<script src="...your script"></script>
<script>
some_unique_name([
{
"model": "accounts.profile",
"pk": 14,
"fields": {
"user": 14,
"email_confirmed": true,
"encrypted_private_key": "Z0FBQUFBQmJLQT09",
"public_key": "LS0tLSS0tLQo=",
"salt": "I8rzovcWsKm4G5Pj3E4DMw=="
}
}
]);
</script>
这是有效的 javascript。但是,您不能在 html 事件处理程序中盲目地做同样的事情,因为
<button type="button" onclick="some_unique_name({{ data|safe }})" ...>
将扩展为
<button type="button" onclick="some_unique_name([
{
"model": "accounts.profile", // syntax error here..
"pk": 14,
"fields": {
"user": 14,
"email_confirmed": true,
"encrypted_private_key": "Z0FBQUFBQmJLQT09",
"public_key": "LS0tLSS0tLQo=",
"salt": "I8rzovcWsKm4G5Pj3E4DMw=="
}
}
])" ...>
浏览器将其视为
<button type="button" onclick="some_unique_name([{"
它不理解。
如果我们暂时忽略 Django,这个问题有两个明显的修复方法:
(1) 把函数的参数放在一个变量中:
<script>
var my_variable = [
{
"model": "accounts.profile", // syntax error here..
"pk": 14,
"fields": {
"user": 14,
"email_confirmed": true,
"encrypted_private_key": "Z0FBQUFBQmJLQT09",
"public_key": "LS0tLSS0tLQo=",
"salt": "I8rzovcWsKm4G5Pj3E4DMw=="
}
}
];
</script>
<button type="button" onclick="some_unique_name(my_variable);">..</button>
(2) 或将调用包装在一个函数中:
<script>
var foo = function () {
some_unique_name([
{
"model": "accounts.profile", // syntax error here..
"pk": 14,
"fields": {
"user": 14,
"email_confirmed": true,
"encrypted_private_key": "Z0FBQUFBQmJLQT09",
"public_key": "LS0tLSS0tLQo=",
"salt": "I8rzovcWsKm4G5Pj3E4DMw=="
}
}
]);
};
</script>
<button type="button" onclick="foo();">..</button>
回到 Django 这变成了
(1)
<script>
var my_variable = {{ data|safe }};
</script>
<button type="button" onclick="some_unique_name(my_variable);">..</button>
和
(2)
<script>
var foo = function () {
some_unique_name({{ data|safe }});
};
</script>
<button type="button" onclick="foo();">..</button>
关于javascript - 尝试 JSON.parse 来自 Django 的序列化数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50955269/