发布评论后,Django Ajax div 未重新加载/消失
Posted
技术标签:
【中文标题】发布评论后,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>.
【讨论】:
以上是关于发布评论后,Django Ajax div 未重新加载/消失的主要内容,如果未能解决你的问题,请参考以下文章
Rails 5 - Ajax 刷新后重新初始化 Javascript?
如何在 Django 中的 Ajax 成功后显示 Html Div