Question

我想使用Javascript在客户端上做一些事情。我在视图中以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 }}');

不起作用。尝试使用反引号（不确定如何在此处输入反引号），而不要使用'。

但是，如果您已经将数据转储到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>

尝试从Django进行JSON.parse序列化数据

1 个答案: