如何解决使用Ajax和Django添加评论
我正尝试取消我的评论表格,以便可以在不刷新页面的情况下提交它。我有一个Comment模型,它具有Post模型的ForeignKey:
class Comment(models.Model):
user = models.ForeignKey(Profile,on_delete=models.CASCADE)
post = models.ForeignKey(Post,on_delete=models.CASCADE)
body = models.TextField(max_length=500)
updated = models.DateTimeField(auto_Now=True)
created = models.DateTimeField(auto_Now_add=True)
class Post(models.Model):
content = models.TextField()
updated = models.DateTimeField(auto_Now=True)
created = models.DateTimeField(auto_Now_add=True)
author = models.ForeignKey(Profile,on_delete=models.CASCADE,related_name='posts')
这是我的模板:
{% for post in posts %}
...
<div id="comList"">
{% if post.comment_set.all %}
{% for c in post.comment_set.all %}
<p>{{ c.body }}</p>
{% endfor %}
{% endif %}
</div>
<form id="addComForm" action="{% url 'posts:comment' %}" method="post">
{% csrf_token %}
<input type="hidden" name="post_id" value={{ post.id }}>
{{ c_form }}
<button id="addComBtn" type="submit" name="submit_c_form">Send</button>
</form>
{% endfor %}
<script>
$(document).ready(function() {
$('#addComBtn').click(function() {
var serializedData = $('#addComForm').serialize();
const url = $('#addComForm').attr('action')
$.ajax({
url: url,data: serializedData,type: 'POST',success: function(response) {
$('#comList').append('<p>' + response.c.body + '</p>')
},error: function(error) {
console.log(error)
}
})
});
});
</script>
这是我的观点:
def comment_view(request):
profile = Profile.objects.get(user=request.user)
if 'submit_c_form' in request.POST:
c_form = CommentModelForm(request.POST)
if c_form.is_valid():
instance = c_form.save(commit=False)
instance.user = profile
instance.post = Post.objects.get(id=request.POST.get('post_id'))
instance.save()
return JsonResponse({'comment': model_to_dict(instance)},status=200)
return redirect('posts:index')
供参考,我的表格和相关网址:
class CommentModelForm(forms.ModelForm):
class Meta:
model = Comment
fields = ('body',)
path('comment/',comment_view,name='comment'),
当前提交后,我在控制台中得到Uncaught TypeError: response.c is undefined
,所以我认为问题出在视图的JsonResponse中。在此方面获得的任何帮助将不胜感激
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。