使用Javascript更改HTML的内部元素以呈现Django For Loop

Question

我目前正在学习Javascript的基础知识，我了解Django。因此，我尝试使用javascript在Django for循环的HTML中显示元素。

这样做的目的是，我明白使用Javascript呈现数据不需要刷新页面，所以我决定试一试。

为了更多地解释我的问题，这里是我所做的一个例子。

我有一个喜欢帖子的用户名称列表，模板中以以下格式显示：

<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
{% for user in post_likes %}
<span class="dropdown-item" >{{ user.username }}</span>
{% endfor %}

因此，我在span中添加了一个id，并添加了以下与javascript相关的脚本：

<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
{% for user in post_likes %}
<span id="id{{ forloop.counter }}" class="dropdown-item" >{{ user.username }}</span>
{% endfor %}
</div>
<script>
var element = document.getElementById("id{{ forloop.counter }}");
element.innerHTML = "{{ user.username }}";
</script>

当一个新用户喜欢帖子时，他的名字应该直接出现在这个循环中，而不刷新页面，但这并没有发生，登录用户的名字就是出现的那个。

我不确定这是否是将Javascript和Django集成在一起的正确方法，但我想尝试一下，并寻找答案，但没有找到可靠的东西。

我的问题：我是否应该在代码中修复一些问题，以在模板中显示数据，从而避免刷新页面？

更新我已经使用forloop.counter通过代码更新了脚本和hmtl，但需要刷新页面才能查看添加到列表的新名称

Answer 1

这不是一个完整的答案，但我认为您的代码中有一个问题：

{% for user in post_likes %}
<span id="id01" class="dropdown-item" >{{ user.username }}</span>
{% endfor %}

这会导致多个具有相同id的跨度。请考虑使用forloop.counter。

Answer 2

没那么简单，如果你想发送实时数据，你需要实现Django Channels之类的东西，并通过websockets 发送数据