Javascript和Django：AJAX的表单提交事件监听器使用for循环的多个表单

如何解决Javascript和Django：AJAX的表单提交事件监听器使用for循环的多个表单

我以前尝试过发帖，但是我没有得到一个明确的答案，所以我想我应该简单地重新构造它。

我的模板当前使用for循环打印“博客”的帖子，并在其中使用另一个for循环打印属于该帖子的评论。

在我继续之前，只想明确说明我的模型和数据库正在运行。我什至目前还拥有一个有效的注释部分，它会不断刷新页面，因此我想改用JS和AJAX。

由于我有多篇帖子都带有自己的评论部分，因此我尝试通过说出为循环中的每个表单创建单独的ID。但是，对于应该如何创建一个EventListener来确保无论按下哪种形式，它都会获取正确的数据并将其发送到后端，我感到有些困惑。

任何帮助将不胜感激。谢谢！可根据要求提供代码。但是，我想强调一点，因为我的模型代码可以正常工作，所以不需要我的模型代码。

{% for post in posts %}
        <div class="mt-3 px-5 pt-4 pb-2 bg-white shadow-sm" style="border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;">
            <div class="row">
                <div class="col-xs-1 pl-4">
                    <img class="rounded-circle post-image" src="{{ post.author.profile.image.url }}" />
                </div>
                <div class="col-xs-4 pt-1">
                    <a class="mr-2 post-author-name" href="#">{{ post.author.first_name }} {{ post.author.last_name }}</a>
                    <small class="text-muted post-time"><br>{{ post.date_posted|date:"F d,Y" }}</small>
                </div>
                <div class="col-xs-7 ml-3 pt-2">
                    <a href="{% url 'post-detail' society_id=membership.society.id pk=post.id %}" class="btn btn-light btn-sm">Click for more options</a>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <p class="post-content">{{ post.content }}</p>
                </div>
            </div>
        </div>

        <div class="mb-3 pr-5 pt-4 pb-2 bg-light shadow-sm border-light" style="border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem;">
            <div class="col-sm-12 pl-5 pb-5">
                <form class="form-inline" method="POST" style="display:flex" id="{{forloop.counter}}"> {% csrf_token %}
                    <input type="search" name="comment" placeholder="New comment" class="form-control mr-sm-2 p-4" style="flex-grow:1;">  
                    <button name="post_id" class="btn btn-info my-2 my-sm-0 " value="{{post.id}}" onclick='update_comments("{{forloop.counter}}")'> Post </button>
                </form>
            </div>
            {% for comment in post.comments.all %}
                <div class="row">
                    <div class="col-xs-1 offset-1 pl-4">
                        <img class="rounded-circle comment-image" src="{{ comment.author.profile.image.url }}" />
                    </div>
                    <div class="col-xs-4">
                        <a class="mr-2 comment-author-name" href="#">{{ comment.author.first_name }} {{ comment.author.last_name }}</a>
                        <small class="text-muted comment-time"><br>{{ comment.date_posted|date:"F d,Y" }}</small>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 offset-1">
                        <p class="comment-content">{{ comment.content }}</p>
                    </div>
                </div>
            {% empty %}
                <div class="px-5">
                    <p>No comments for this post.</p>
                </div>
            {% endfor %}
        </div>
    {% endfor %}