Question

我试图在我的jquery脚本中使用django上下文变量。

首先，这个工作：

的index.html

<head>
    <script type="text/javascript">
        var page_size = {{page_obj.paginator.num_pages}};
    </script>

    <script type="text/javascript" src="{% static 'js/paginate.js' %}"></script>
</head>

JS / paginate.js

$(document).ready( function() {
    alert(page_size);                           //THIS WORKS!!!
});

但是，我不希望用户能够查看我的变量，所以我只是在我的“paginate.js”文件中添加了全局变量声明：

的index.html

<head>
    <script type="text/javascript" src="{% static 'js/paginate.js' %}"></script>
</head>

JS / paginate.js

var page_size = {{page_obj.paginator.num_pages}};              //Exactly the same as the above!!

$(document).ready( function() {
    alert(page_size);                           //ERROR!!!
});

奇怪的是，这给了我一个错误：

SyntaxError: invalid property id
    var page_size = {{page_obj.paginator.num_pages}};

我不知道为什么第一个有效，而第二个给我一个错误，因为它们完全一样......也许是因为我是第二个是Jquery中的声明.. ??有什么想法??

谢谢..

Answer 1

TL; DR

您无法将变量传递给静态文件，因为它们不是由Django模板处理器解析的。

说明

您的第一个示例有效，因为您在模板中设置了{{ page_obj.paginator.num_pages }}，它将被解析并转换为数字。当您使用Django返回模板时（通过任何render方法），只会呈现模板。模板中链接的CSS和Javascript称为静态文件：这意味着它们是Django模板处理器无法读取的资源。

想象一下，您想在页面中的img中插入变量。它有意义吗？没有？但是，这是相同的行为。

那么怎么做？

您可以通过Javascript文件中的AJAX请求获取数据（警告：对您的案例有点矫枉过正），或使用您的第一种方法。

相关主题：

Answer 2

在Django中，如果我们需要将变量从视图传递到JS / html文件，我们必须确保该文件由django模板引擎解析。换句话说，该文件必须由Django提供。

然而，这里包含的Javascript不会被服务器上的Django模板处理器处理，因此不起作用。

如果你需要传递要在JS文件中使用的模板变量，那么你必须使用问题中提到的第一个方法，即创建一个小的<script>块，其中一些全局变量被声明为包含那些模板变量。然后，任何JS文件都可以通过查找全局js变量来获取值。

在Jquery中定义Django上下文变量给我错误？

2 个答案:

TL; DR

说明

那么怎么做？