将评论表单与 django 中的帖子放在同一页面上

Question

我需要帮助将用户的评论表单与帖子放在同一页面上，目前我在另一个页面上有评论表单，但我真的希望用户能够在他们完成阅读后立即发布 cmets下面附上的帖子是我的帖子模板 `

<section class="main">
        <div class="container">
            <div class="row">
                <section class="posts-wrapper col-sm-12 col-md-8">
                    <div class="posts">
                        <p class="movie-details"><a href="" class="date">{{articles.postdate}}</a> | {% for a in articles.category.all %}<a href="{{a.get_absoulte_url}}" class="genre">{{a}}, </a>{% endfor %}  </p>
                        <p class="movie-details pt-0"><b>Staring : </b> {% for c in articles.star.all %}<a href="{{c.get_absoulte_url}}" class="genre">{{c}}, </a>{% endfor %}</p>
                            <p class="movie-details pt-0"><b>Directors : </b> {% for d in articles.director.all %}<a href="{{d.get_absoulte_url}}" class="genre">{{d}}, </a>{% endfor %}</p>
                        <h3 class="title my-3">{{articles.title}}</h3>
                        <p><b>Released:</b> {{articles.releasedate}}</p>
                        <p><b>Seen:</b> {{articles.dateseen}}</p>
                        <p class="text">{{articles.body | safe}}</p>
                    </div><hr>
                    <div class="comments-wrapper">
                        <h2 class="mt-5"><a href="{% url 'add_comment' slug=articles.slug %}">Leave a Comment</a></h2>
                        <p>Total number of comments <span class="text-danger">{{articles.comments.count}}</span></p>
                        <form action="" method="POST">
                                <button type="submit">Submit</button>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" placeholder="username">
                                </div>
                                <div class="form-group col-md-6">
                                    <input type="email" class="form-control" placeholder="Email">
                                </div>
                            </div>
                            <div class="form-group">
                                <textarea name="" class="form-control" id="" rows="10"></textarea>
                            </div>
                        </form>
                        <hr>
                        <h2 class="mb-4">COMMENTS</h2>
                        {% for comment in articles.comments.all %}
                            <div class="comments py-2 my-3">
                                <div class="comments-img-wrapper">
                                    <img src="" class="comment-image" alt="">
                                </div>
                                <div class="comments-details">
                                    <h5 class="comment-user-name">{{comment.user}} <span class="float-right date">{{comment.created}}</span></h5>
                                    <p>{{comment.body}}</p>
                                </div>
                            </div>
                        {% empty %}
                            <p>there are no comments</p>
                        {% endfor %}
                    </div>
                </section>
                <section class="side-bar col-sm-12 col-md-4">
                    <div class="search-bar-mini p-3 my-2">
                        <h3>Search</h3>
                        <form action="">
                            <input type="text" class="form-control" placeholder="SEARCH">
                        </form>
                    </div>
                    <div class="search-bar-mini p-3 my-3">
                        <h3>Info</h3>
                        <p>This is a place where I’ll be putting quick reviews of movies I’ve seen</p>
                    </div>
                    <div class="search-bar-mini p-3 my-3">
                        <h3>Follow on social media</h3>
                        <p><a href="" class="mx-2"><i class="fa fa-twitter-square" style="font-size: 25px;"></i></a> <a href="" class="mx-2"><i class="fa fa-instagram" style="font-size: 25px;"></i></a></p>
                    </div>
                    {% for ads in adverts %}
                        <a href="{{ads.link}}" target="_blank">
                            <div class="search-bar-mini p-3 my-3">
                                <img src="{{ads.image.url}}" alt="">
                            </div>
                        </a>
                    {% empty %}
                        <p>no ads</p>
                    {% endfor %}
                </section>
            </div>
        </div>
    </section>

这是我的 add_comment 视图

def add_comment(request, slug):
    post = get_object_or_404(Article, slug=slug)
    if request.method == 'POST':
        form =  CommentForm(request.POST)
        if form.is_valid():
            comment = form.save(commit=False)
            comment.post = post
            comment.save()
            return redirect('details', slug=post.slug)
    else:
        form = CommentForm()
    template = 'articles/add-comment.html'
    context = {'form':form}
    return render(request, template, context)

这是我的forms.py

class CommentForm(forms.ModelForm):
    class Meta:
        model = Comment
        fields = ('user', 'email', 'body')

Answer 1

不是 100% 清楚您面临什么问题，但如果您想将 cmets 添加到任何项目（文章、博客），我很可能会使用 ajax post 来处理。

1) 在文章旁边放置常用字段（评论、发布按钮）

2）给按钮添加事件（onclick）：

onclick="AddComment(blog.id, comment.value)"

3) AddComment 至少需要两个参数：相关实例的 id 和评论的文本

4) 在 javascript (jquery) 中处理 ajax 帖子：

function AddComment(blog_id, comment){
// validation checks
    $.ajax({
        type: "POST",
        url: "/blog/add_comment/",
        data: {
            'blog_id' : blog_id,
            'comment' : comment,
            'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
        },
        success: addcommentDetailSuccess,
        dataType: 'html'
    });

5) 在视图中创建保存方法

6) 成功保存后，使用 addcommentDetailSuccess 函数将数据传递给您的 html 标记之一：

function addcommentDetailSuccess(data, textStatus, jqXHR){
$('#comments_tbody').html(data);

}

您可能还想添加验证规则、消息等。

祝你好运！