有两个问题 第一:发表评论时,终端出现以下错误
错误请求:/ post / comment /
“ POST / post / comment / HTTP / 1.1” 400 37
第二个:body:formData
返回空的JSON(我通过直接分配存储表单内容body:content
的JavaScript变量来解决此问题)只是想知道为什么formData返回空的
这是我的项目的代码
型号:
class Comment(models.Model):
body = models.TextField()
created_on = models.DateTimeField(auto_now_add=True)
author = models.ForeignKey(get_user_model(),on_delete=models.CASCADE)
post = models.ForeignKey('Post',related_name="post_comment",on_delete=models.CASCADE)
class Meta:
ordering =['-created_on']
表格
class PostCommentForm(forms.ModelForm):
class Meta:
model = Comment
fields = ('body',)
查看
class PostComment(LoginRequiredMixin,FormView):
form_class = PostCommentForm
def form_invalid(self,form):
if self.request.headers.get('x-requested-with') == 'XMLHttpRequest':
return JsonResponse({"error": form.errors}, status=400)
else:
return JsonResponse({"error": "Invalid form and request"}, status=400)
def form_valid(self,form):
if self.request.headers.get('x-requested-with') == 'XMLHttpRequest':
form.instance.author = self.request.user
post = Post.objects.get(pk=self.kwargs['pk'])
form.instance.post = post
comment_instance = form.save()
ser_comment = serializers.serialize("json", [comment_instance, ])
return JsonResponse({"new_comment": ser_comment}, status=200)
else:
return JsonResponse({"error": "Error occured during request"}, status=400)
网址
path('post/comment/', views.PostComment.as_view(), name='post-cmt'),
使用Axios.js的JavaScript Ajax
<script type="text/javascript">
axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';
function createComment(formData) {
console.log("Posting Comment");
axios.post("{% url 'post-cmt' %}", {
body: content
}).then(function(response) {
console.log(response)
}).catch(function(error){
console.error("Error", error);
});
}
const content = document.getElementById("id_body").value
const cform = document.getElementById("comment-form");
cform.addEventListener('submit', function(e){
e.preventDefault();
if(content){
let formData = new FormData(cform);
createComment(formData);
}else {
console.log("You cannot submit an empty form")
}
});
</script>