将Django变量传递给JavaScript

Question

我在将变量从Python后端传递到JavaScript时遇到了困难。我的很多变量在JavaScript中看起来像这样：

if ('{{ user.has_paid_plan}}' == 'True') {
    isPayingUser = true;
} else {
    isPayingUser = false;
}

这看起来很难看，我相信有更简洁的方法来实现。应该如何处理？

- David542

---

在你的js脚本开始时，首先将所有的Django变量放入js变量中。例如 - var has_paid_plan = {{ user.has_paid_plan }}。然后在js的其余部分中随处使用这个js变量。这样你也可以在外部js文件中使用这些变量。另一个选项是使用数据属性。你可以在某个div或其他元素中设置一个data-has_plan属性。然后你可以使用js/jQuery获取它的值。当页面上只有一个用户时，我会选择第一种选项；如果我要显示用户列表，我会选择使用数据属性。 - undefined

@VaibhavVishal 如果我只是使用 {{ user.has_paid_plan }}，在 JavaScript 中会出现错误，因为它被直接传递为 True（字符串，没有引号）。 - undefined

你可以在视图中将其JSON序列化。它将被转换为true，或者使用引号并检查"True"或"False"。 - undefined

@VaibhavVishal 不，我也使用django变量。这是一个同时包含HTML/Django模板和JavaScript的模板。 - undefined

@David542 改成 var foo = "{{ foo }}";。 - undefined

不管你的问题是什么，我个人认为不要使用Django模板。在后端使用Django Rest Framework，在前端使用React或类似的框架。React可以使用你的REST API。而且这样做以后创建移动应用程序会更容易，因为不需要对后端代码进行任何更改。这大大减少了后端代码量。我记得在切换到REST API后，我的一个views.py文件的代码行数从大约500行减少到了大约50行。 - undefined

Answer 1

这可能是一个奇怪的方法，但我认为解决这个问题的一种方式是将一个包含所有其他变量的json对象作为变量传递。例如：

def user(request):
    user = request.user

    ctx = {
      'isPayingUser': user.is_paying_user()
      'age': user.age
      'username': user.email
    }

    json_ctx = json.dumps(ctx)
    ctx['json_ctx'] = json_ctx

    return render(request, 'template.html', ctx)

这样，您就可以访问所有的django/python变量，并且您也可以将所有变量正确地json编码为"json_ctx"对象，您可以在javascript中使用它。

- David542

---

如果你能在JavaScript中添加一个使用JSON变量的示例，那就太好了。 - undefined

Answer 2

让我们简单些。您不必使用其他响应类型，如JSON或其他任何类型。您需要做的第一件事是从后端传递值。假设用户模型具有名为“has_paid_plan”的字段，该字段是布尔字段。如果没有，请将其转换为布尔字段。

views.py

context = dict()
context['user'] = user_instance
return render(request, 'template.html', context)

template.html

将此内容添加到您的脚本中。

<script>
   .... // other code
    {% if user.has_paid_plan %}
        isPayingUser = true;
    {% else %}
        isPayingUser = false;
    {% endif %}
</script>

尽量保持简单，这是一个好的实践。希望这可以帮助到您。

- Ankit Singh

Answer 3

<input type='hidden' value='{{ user.has_paid_plan}}' id='has_paid_plan' />


if ($('#has_paid_plan').val() == 'True') {
    isPayingUser = true;
} else {
    isPayingUser = false;
}

- daniel

---

这种方法比我目前的方式还要丑陋（我原以为已经是最糟糕的了）。请注意，我目前的做法是有效的——我只是想看看是否有更好的建议做法。 - undefined

我理解这种偏差，我很少使用django自带的模板函数，前端通常使用vue，或者使用异步加载（后端打包成json，用javascript解析非常简单）。 - undefined

虽然这可能回答了作者的问题，但它缺少一些解释性的词语和链接到文档的内容。裸露的代码片段没有周围的一些短语是不太有帮助的。你可能会发现如何写一个好的答案非常有帮助。请编辑你的回答。 - undefined

Answer 4

另一种解决方案：

<script>
const isAuthenticated = ${str(user.is_authenticated).lower()}
</script>

- Duc Trung Mai