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

Posted 2023-02-24

【中文标题】发布评论后，Django Ajax div 未重新加载/消失

【英文标题】：Django Ajax div not reloading/disappearing after posting comment

【发布时间】：2020-12-18 03:55:10

【问题描述】：

我试图解决这个问题几天。我想在不刷新页面的情况下发表评论。问题是 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

【问题讨论】：

console.log(data); 是否为您提供正确的数据？您的代码对我来说似乎没问题，也许问题出在其他地方

我编辑了帖子以添加对象，看起来不错

【参考方案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>.