发布评论后，Django Ajax div 未重新加载/消失

Question

我试图解决这个问题几天。我想在不刷新页面的情况下发表评论。问题是 cmets 所在的 div 在点击 post 按钮后没有重新加载或消失。这取决于我如何“抓住”它：当我使用 id 时：

$('#comments').append('<p>' + data.comment.content + '</p><small>' + data.comment.author +  '/' + data.comment.date_of_create + '</small>');

它没有重新加载，如果我使用类它就会消失。当我刷新页面时，正在正确添加评论。这是我下面的代码。

views.py

class PostDetailView(FormMixin, DetailView):
    model = Post
    template_name = 'blog/post_detail.html'
    context_object_name = 'post'
    form_class = CommentForm

    def get_context_data(self, **kwargs):
        context = super(PostDetailView, self).get_context_data(**kwargs)
        context['form'] = CommentForm(initial={'post': self.object})
        return context

    def post(self, request, *args, **kwargs):
        self.object = self.get_object()
        form = self.get_form()
        if form.is_valid():
            if request.method == 'POST':
                new_comment = Comment.objects.create(
                    author = self.request.user,
                    post = self.object,
                    content = form.cleaned_data['content']
                )
                return JsonResponse({'comment': model_to_dict(new_comment)}, status=200)
        else:
            return self.form_invalid(form)

    def form_valid(self, form):
        form.instance.author = self.request.user
        form.instance.post = self.get_object()
        form.save()
        return super(PostDetailView, self).form_valid(form)

    def get_success_url(self):
        return reverse('post_detail', kwargs={'slug': self.object.slug})

cmets.js

$(document).ready(function(){
    $("#commentBtn").click(function(){
        var serializedData = $("#commentForm").serialize();
        $.ajax({
            url: $("commentForm").data('url'),
            data: serializedData,
            type: 'post',
            dataType: 'json',
            success: function(data){
                console.log(data);
                $('#comments').append('<p>' + data.comment.content + '</p><small>' + data.comment.author +  '/' + data.comment.date_of_create + '</small>');
                $('textarea').val('');
            }
        })
    });
});

post_detail.html

<h3>Dodaj komentarz:</h3>
    <form action="" method="POST" id="commentForm" data-url="{% url 'post_detail' slug=post.slug %}">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="button" id="commentBtn">Wyślij</button>
    </form>

    <div id="comments">
        <h3>Komentarze:</h3>
        {% for comment in post.comment_set.all %}
            <p>{{ comment.content }}</p>
            <small>{{ comment.author }} / {{ comment.date_of_create }}</small>
        {% endfor %}
    </div>

在我放在底部的 base.html 文件中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{% static 'js/comment.js' %}"></script>

settings.py

STATIC_URL = '/static/'
STATICFILES_DIR = [
    os.path.join(BASE_DIR, 'static')
]

最烦人的事情是我遵循了一些决议/教程，我做了同样的事情，但它仍然无法正常工作。配置不好会是问题吗？提前感谢您的帮助！

控制台给出对象： https://i.stack.imgur.com/vWp9N.png

Answer 1

不是这个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

这样做

<script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>.