将Ajax添加到注释部分不起作用

Question

我正试图将Ajax添加到我的注释部分，以避免每次添加注释时都会刷新页面。

因此，我将注释部分从new comments.html加载到post-details.html，并按照实现Ajax进行发布，但我的问题是它没有任何效果，页面需要刷新以显示新的注释

我在views.py中对Generic DetailView类进行了子分类，并试图找到一种基于URL中接收到的参数以JSON格式返回数据的方法。以下是我尝试做的：

class PostDetailView(DetailView):
model = Post
template_name = "blog/post_detail.html"  # <app>/<model>_<viewtype>.html
def get_context_data(self, *args, **kwargs):
context = super(PostDetailView, self).get_context_data()
post = get_object_or_404(Post, slug=self.kwargs['slug'])
comments = Comment.objects.filter(
post=post).order_by('-id')
total_likes = post.total_likes()
liked = False
if post.likes.filter(id=self.request.user.id).exists():
liked = True
if self.request.method == 'POST':
comment_form = CommentForm(self.request.POST or None)
if comment_form.is_valid():
content = self.request.POST.get('content')
comment_qs = None
comment = Comment.objects.create(
post=post, user=self.request.user, content=content)
comment.save()
return HttpResponseRedirect("blog/post_detail.html")
else:
comment_form = CommentForm()
context["comments"] = comments
context["comment_form"] = comment_form
context["total_likes"] = total_likes
context["liked"] = liked
if self.request.is_ajax():
html = render_to_string('blog/comments.html', context, request=self.request)
return JsonResponse({'form': html})
else:
return context

但这给了我TypeError，它应该是：

TypeError: context must be a dict rather than JsonResponse.

这是回溯：

Traceback (most recent call last):
File "C:UsersUserDesktopProjectvenvlibsite-packagesdjangocorehandlersexception.py", line 47, in inner
response = get_response(request)
File "C:UsersUserDesktopProjectvenvlibsite-packagesdjangocorehandlersbase.py", line 202, in _get_response
response = response.render()
File "C:UsersUserDesktopProjectvenvlibsite-packagesdjangotemplateresponse.py", line 105, in render
self.content = self.rendered_content
File "C:UsersUserDesktopProjectvenvlibsite-packagesdjangotemplateresponse.py", line 83, in rendered_content
return template.render(context, self._request)
File "C:UsersUserDesktopProjectvenvlibsite-packagesdjangotemplatebackendsdjango.py", line 59, in render
context = make_context(context, request, autoescape=self.backend.engine.autoescape)
File "C:UsersUserDesktopProjectvenvlibsite-packagesdjangotemplatecontext.py", line 268, in make_context
raise TypeError('context must be a dict rather than %s.' % context.__class__.__name__)

在控制台中，我收到这个错误：

GET http://127.0.0.1:8000/blog/blog-4/ 500 (Internal Server Error)  jquery.min.js:2 

以下是评论部分：

<!-- Submit Comment -->
<div class="container-fluid mt-2">
<div class="form-group row">
<form action="{% url 'blog:post-comment' post.slug %}" method="post" class="comment-form" action=".">
{% csrf_token %}
{{ comment_form.as_p }}
<input type="submit" name="post_id" value='Submit' class="btn btn-outline-success">
<!--                <button type="submit" class="btn btn-outline-success">Submit</button>-->
</form>
</div>
</div>
<!-- Submit Comment -->
<!-- Show Comment -->
<button class="cmt_btn btn btn-outline-info mb-0">Show / Hide {{comments.count}} Comment{{comments|pluralize}}</button>
<div class="comment-box">
{% for comment in comments %}
<ul class="mt-3 list-unstyled">
<li class="media">
<img class="rounded-circle article-img" src="{{ comment.post.author.profile.image.url }}">
<div class="media-body">
<h5 class="mt-0 mb-1">{{comment.user| capfirst}}<small class="text-muted">- {{ comment.created}}</small> </h5>
<hr class="solid mt-0">
{% if comment.user == user %}
<div>
<a class="float-right mr-3" href="{% url 'blog:delete-comment' comment.id%}">Delete </a>
</div>
{% endif %}
{{ comment.content}}
</div>
</li>
</ul>
{% endfor %}
</div>
<!-- Show Comment -->

这是的脚本

<script>
$(document).on('submit', '.comment-form', function(event){
event.preventDefault();
console.log($(this).serialize());
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: 'json',
success: function(response) {
$('.main-comment-section').html(response['form']);
$('textarea').val('');
},
error: function(rs, e) {
console.log(rs.responseText);
},
});
});
</script>

我的问题是：

出现此错误的原因是什么？如何修复？

Answer 1

函数get_context_data仅用于为不处理ajax请求的上下文构建数据。您需要拆分您的功能以提供对GET数据的处理

示例结构

class PostDetailView(DetailView):
model = Post
template_name = "blog/post_detail.html"  # <app>/<model>_<viewtype>.html
def get_context_data(self, *args, **kwargs):
[...]
return context
def get(self, request, *args, **kwargs):
if self.request.is_ajax():
context = self.get_context_data(self, *args, **kwargs)
html = render_to_string('blog/comments.html', context, request=self.request)
return JsonResponse({'form': html})
[...]

def post(self, request, *args, **kwargs):
[...]