如何解决Django Axios Ajax错误请求错误

时间:2020-10-06 05:10:27

标签: javascript python django ajax axios

有两个问题 第一:发表评论时,终端出现以下错误

错误请求:/ 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>

0 个答案:

没有答案