Json возвращает пустой словарь

Пытаюсь сделать ассинхроную отправку сообщения на сервер, что бы отображалось без перезагрузки страницы. Но столкнулся с проблемой. Json вместо написанного в форме, возвращает пустой словарь. Не могу понять, в чем проблема в js или в python коде. Сам по себе код работает и отправляет сообщения, но он отправляет тот самый пустой словарь, а не данные с формы. Код прикрепляю ниже.

views.py

from django.http import JsonResponse
from django.shortcuts import  render

import json

from .models import Commet
from .forms import Com_Form


def index(request):

    comments = Commet.objects.all()
    form = Com_Form(request.POST)
    if request.headers.get('x-requested-with') == 'XMLHttpRequest': 
         message = json.load(request)['message']

         comment = Commet.objects.create(content=message,)
         comment.save()
            
         data = {
                "content": comment.content, 
            }
         print(data)
         return JsonResponse(data, status=200)
    #if form.is_valid():
    #    Commet.objects.create(message=form.cleaned_data['comment']) 

 
    context = { 
        "comments":comments, 
    } 
    return render(request, "index.html", context)

models.py

class Commet(models.Model):
    content = models.TextField()

index.html с js скриптом

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="temp">

        </div>
<form id="comment-form" method="POST">

    {% csrf_token %}
    <th><label for="message">Message:</label></th>
    <td>

        <textarea type="text" name="message" id="message"></textarea>

    <button type="submit">Отправить</button>
</form>
<span id="error" style="color: black;"></span>
{% for comment in comments %}
<div id="comm">{{comment.content}}</div>
{% endfor %}



<script>
    const form = document.getElementById("comment-form");
    form.addEventListener("submit", ()=>{
  let message = document.querySelector("textarea").value;
  console.log("submited.");
    })

    function getCookie(name) { 
  let cookieValue = null; 
  if (document.cookie && document.cookie !== '') { 
      const cookies = document.cookie.split(';'); 
      for (let i = 0; i < cookies.length; i++) { 
          const cookie = cookies[i].trim(); 
          // Does this cookie string begin with the name we want? 
          if (cookie.substring(0, name.length + 1) === (name + '=')) { 
              cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 
              break; 
                } 
            } 
        } 
    return cookieValue; 
} 
const csrftoken = getCookie('csrftoken'); 

    fetch("{% url 'test_site' %}",{
        method: 'POST',
        credential: "same-original",
        headers:{
            "Accept": "application/json",
            "X-Requested-With": "XMLHttpRequest",
            "X-CSRFToken": csrftoken,
        },
        body: JSON.stringify({'message': message}),
    })
    .then(response => {
        return response.json();
    })
    .then(data => {
        console.log(data.content)
        commentDiv = document.createElement("div");
        commentDiv.classList.add("comment");
        commentInnerHtml = "<div id='comm'>"+data.content+"</div>";
        commentDiv.innerHTML = commentInnerHtml;
        const temp = document.getElementById("temp");
        temp.insertBefore(commentDiv, temp.childNodes[0]);
        form.reset();
    })
</script>
</body>
</html>
Вернуться на верх