从 JavaScript 变量访问 Django 变量
首先，我想说这是我在这里的第一个问题！（如果这是多余的或重复的，请原谅我）
我从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变量在渲染中传递的Django变量？
如：
const jsVariable = 'title';
document.getElementById('{{form.jsVariable.auto_id}}').value = '{{suggestion.jsVariable}}'
我还没有找到任何方法来做到这一点，也许还有另一个好主意！
慕勒34288723回答
-
慕娘9325324
我试过一个例子。其中 是从 python 脚本发送变量并在 JavaScript 中访问其值1） 在 views.pyfrom django.shortcuts import renderdef home_view(request): var_name = 'hello' return render(request, 'home.html', {'var_name':var_name})2） 在 html 文件中（首页.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>如果我点击提交按钮（ 你好世界你好 ） 打印在控制台。我存储了var_name的温度值，可以进一步使用。 -
白衣非少年
从您的示例中，看起来您希望以编程方式访问Javascript中的Django模型的属性。主要结论是，您首先需要在Javascript中公开要访问的数据结构（即模型）。下面是您可以尝试的简单、经过编辑的概念验证。import jsondef 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]);查看转换 Django 模型对象到字典，所有字段都完好无损，了解将 Django 模型序列化为字典的选项。 -
湖上湖
好吧，最后我找到了两个暴露的问题的解决方案。首先，我声明的脚本函数不起作用，因为它似乎有一个属性叫做autocomplete（参见autocomplete HTML属性），所以，你不能用这个名字声明一个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将其与问题进行比较，确实简化了问题。
随时随地看视频慕课网APP
相关分类
JavaScript