从 JavaScript 变量访问 Django 变量 [已解决]答案

【问题标题】：Access Django variable from JavaScript variable [SOLVED]从 JavaScript 变量访问 Django 变量 [已解决]
【发布时间】：2020-05-25 12:41:13
【问题描述】：

首先，我想说这是我在这里的第一个问题！（如果这是多余或重复的，请原谅我）

我在从 Django 模板调用 JS 脚本时遇到一些问题：

{% for suggestion in suggestions %}
    <img class="catalogue-poster" src="{{ suggestion.poster }}" alt="Portada"  onclick="                 
        document.getElementById('{{form.title.auto_id}}').value = '{{suggestion.title}}'
        document.getElementById('{{form.year.auto_id}}').value = '{{suggestion.year}}'
        document.getElementById('{{form.director.auto_id}}').value = '{{suggestion.director}}'
        document.getElementById('{{form.rating.auto_id}}').value = '{{suggestion.rating}}'
        document.getElementById('{{form.poster.auto_id}}').value = '{{suggestion.poster}}'
        document.getElementById('{{form.trailer.auto_id}}').value = '{{suggestion.trailer}}'
        document.getElementById('{{form.synopsis.auto_id}}').value = '{{suggestion.synopsis}}'
        document.getElementById('{{form.cast.auto_id}}').value = '{{suggestion.cast}}'  
    " />
{% endfor %}

那么，首先，我怎样才能在外面声明一个函数。我是一名 C 开发人员，抱歉我的无知。

我试过在外面创建一个脚本，比如

<script>
    function foo() {
      console.log('Hey');
    });
</script>

并以这种方式调用它：

<img class="catalogue-poster" src="{{ suggestion.poster }}" alt="Portada"  onclick="foo()"/>

但是这个在纯 HTML 上工作的简单事情，使用 django 模板似乎不起作用......

另一方面，真正的问题是，有没有办法使用 js 变量访问在 render 中传递的 Django 变量？

如：

const jsVariable = 'title';
document.getElementById('{{form.jsVariable.auto_id}}').value = '{{suggestion.jsVariable}}'

我还没有找到任何方法来实现这一点，也许还有另一个好主意！

[已解决]：正如@SahilDesai 所说，模板只会对视图函数通过上下文对象发送的变量做出响应。 Jinja 模板不会知道由 javascript 创建的变量。所以似乎不可能做到这一点。

【问题讨论】：

解决方案有帮助吗？或者你想做一些不同的任务？

标签： javascript django django-templates

【解决方案1】：

我试过一个例子。在哪里从 python 脚本发送一个变量并在 JavaScript 中访问它的值

1) 在views.py中

from django.shortcuts import render

def home_view(request):
    var_name = 'hello'
    return render(request, 'home.html', {'var_name':var_name})

2) 在 html 文件中(home.html)

<html>
    <h1>Home Page</h1>
    <input type="button" value="Submit" onclick="fun()">

    <script>
        function fun(){
            console.log('hello world '+ '{{var_name}}' );
        }
        var temp = '{{var_name}}';
        console.log(temp + 20);
    </script>
</html>

如果我单击提交按钮 (hello world hello) 将打印在控制台中。

我在 temp 中存储了 var_name 的值，可以进一步使用。

【讨论】：

谢谢@SahilDesai，我已经做到了。我要求的是使用 JavaScript 变量访问 django 变量。类似， const a = 'var_name' console.log({{a}}) 所以，变量 'a' 将被替换为 'var_name' ！！！我相信这是不可能的，这就是我问的原因
不，这是不可能的，因为 Jinja 模板只会响应从视图函数通过上下文对象发送的变量。 Jinja 模板不知道 javascript 创建的变量

【解决方案2】：

从您的示例看来，您希望以编程方式在 Javascript 中访问 Django 模型的属性。

主要内容是您首先需要在 Javascript 中公开要访问的数据结构（即模型）。

这是一个简单的、经过编辑的、您可以尝试的概念验证。

import json

def my_view(request):
    obj = MyModel.objects.get(1)
    obj_dict = {
        "foo": obj.foo,
        "bar": obj.bar,
    }
    return render(request, 'my_view.html', context={'obj_json': json.dumps(obj_dict)} )

<script>
var obj = {{obj_json}};

var field = 'foo';
console.log(obj[field]);

查看Convert Django Model object to dict with all of the fields intact 了解将 Django 模型序列化为字典的选项。

【讨论】：

附注是您可能“不应该这样做”：听起来您会受益于使用 Django Rest Framework 之类的东西为您的模型提供 API 并将 javascript 集成到该模型中.但这与您的具体问题无关。
好的，谢谢@Sebastian，这很好。当然，我不应该这样做，但这是将 json 变量传递给 django 模板的好技巧！
顺便说一下，我知道 Django Rest Framework，但这是一个拼贴项目，我们必须适合纯 django！

【解决方案3】：

好吧，我终于找到了解决这两个暴露问题的方法。

首先，我声明的脚本函数不起作用，因为似乎有一个名为 autocomplete 的属性（参见autocomplete HTML attribute）所以，你不能用这个名字声明一个 JavaScript 函数，我失败了。 Uncaught TypeError: autocomplete is not a function
最后，我找到的简单解决方案是将一个字典数组传递给模板：

return render(request, 'example.html', {'form': form, 'suggestions': suggestions })

然后在模板中：

{% for suggestion in suggestions %}
    <img src="{{ suggestion.poster }}" onclick="autocompleteMovie({{suggestion}});" />
{% endfor %} 

<script>
    function autocompleteMovie(suggestion){
        for (let field in suggestion)
            document.getElementById('id_' + field).value = suggestion[field] 
    }
</script

与问题相比，这确实简化了问题。

【讨论】：