将 django 变量传递给 javascript答案

【问题标题】：Passing django variables to javascript将 django 变量传递给 javascript
【发布时间】：2019-03-24 00:21:49
【问题描述】：

我很难将变量从 python 后端传递到 javascript。我的很多变量在 javascript 中都是这样的：

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

这很难看，我相信有一种更清洁的方法可以做到这一点。这应该怎么做？

【问题讨论】：

在您的 js 脚本开始时，首先将所有 django 变量放入 js 变量中。例如 - var has_paid_plan = {{ user.has_paid_plan }}。然后在其余的 js 中随处使用该 js 变量。这样你也可以在外部 js 文件中使用这些变量。其他选项是使用数据属性。您可以在某些 div 或任何内容中拥有 data-has_plan。然后你可以使用 js/jQuery 获取它的值。当页面上只有一个用户时，我会选择第一个选项，如果我显示用户列表，我将使用数据属性
@VaibhavVishal 如果我只是做{{ user.has_paid_plan }}，我会在 javascript 中收到错误，因为它实际上是作为 True 传递的（字符串，没有引号）。
您可以在视图中对其进行 json 序列化。它将被转换为true，或使用引号并检查"True" 或"False"
@VaibhavVishal 不，我也使用 django 变量。这是一个既有 html/django 模板又有 javascript 的模板。
@David542 然后改成var foo = "{{ foo }}";。

标签： javascript python jquery django django-templates

【解决方案1】：

让我们保持简单。您不必使用任何其他响应类型，例如 JSON 或其他任何东西。您要做的第一件事是从后端传递值。假设用户模型有一个字段为“has_paid_plan”作为布尔字段。如果不是，请将其转换为 BooleanField。

views.py

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

模板.html

将此添加到您的脚本中。

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

尽量保持简单。这是一个很好的做法。希望这会有所帮助。

【讨论】：

【解决方案2】：

这可能是一种奇怪的方法，但我想解决这个问题的一种方法是将 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 中使用。

【讨论】：

如果你能添加一个如何在javascript中使用json变量的例子会很好

【解决方案3】：

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


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

【讨论】：

这种方式比我现在的方式更丑陋（我认为它已经很糟糕了）。请注意，我目前正在做的工作 - 我只是想看看是否有建议的做法来更好地做到这一点。
理解偏差，我很少使用django自带的模板功能，前端一般使用vue，或者使用异步加载（后端打包成json，用javascript解析特别简单)
虽然这可能会回答作者的问题，但它缺少一些解释性文字和文档链接。如果没有围绕它的一些短语，原始代码 sn-ps 并不是很有帮助。您可能还会发现how to write a good answer 非常有帮助。请编辑您的答案。