javascript - 尝试 JSON.parse 来自 Django 的序列化数据

Question

我想在客户端使用 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

有人能帮忙吗？

Answer 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>