Как разрешить доступ JSON к тексту внутри текстовой области в HTML>

Я пытаюсь создать кнопку, которая позволяет пользователям сохранять правки к посту, которые они пишут в textarea, через JSON.
Я пытаюсь сохранить данные через запрос PUT, но получаю следующую ошибку:

raise JSONDecodeError("Expecting value", s, err.value) from None
json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)

функция javascript:

function save_edit(id){
    console.log("save button is clicked");
    const edit_area = document.querySelector(`#edit_area_${id}`);
    //save the post
    fetch(`/edit/${id}`,{
        method: 'PUT',
        post: JSON.stringify({
            post: edit_area.value
        })
    })
}

django.views:

def edit(request, post_id):
    try:
        post = Post.objects.get(pk=post_id)
    except Post.DoesNotExist:
        return JsonResponse({"error": "Post not found."}, status=404)

    if request.method == "POST":
        edited_post = request.POST.get('post')
        try:
            post.post = edited_post
            post.save()
        except:
            return JsonResponse({"error": "Editing the post did not work."}, status=404)

    elif request.method == "GET":
        return JsonResponse(post.serialize())

    elif request.method == "PUT":
        data = json.loads(request.body)
        edited_post = data["edit_area"]
        post.post = data["edited_post"]
        post.save()

    else:  
        return JsonResponse({"error": "Need a GET request."}, status=404)

html

{% for post in page_obj.object_list %}
            <div class = "individual_posts">
                <a href="{% url 'username' post.user %}"><h5 id="p_user" class = "post_user">{{ post.user }}</h5></a>
                <h6 id = "post_itself_{{ post.id }}" class="post_itself">{{ post.post }}</h6>
                {% if post.user == request.user %}
                    <button id="{{ post.id }}" class="edit_button" value="{{ post.id }}">Edit</button>
                {% endif %}
                <textarea class="textarea" id="edit_area_{{ post.id }}" cols="220" rows="5"></textarea>
                <button class="edit_save" id="save_{{ post.id }}">Save</button>
            </div>
        {% endfor %}

models.py serialization

def serialize(self):
        return{
            "id": self.pk,
            "post": str(self.post),
            "user": self.user.pk,
        }

Запрос GET работает правильно, но я получаю ранее указанную ошибку от запроса PUT. Я думаю, что это связано с тем, как я получаю значение через edited_post = data["edit_area"]. Как правильно получить доступ к тексту внутри textarea для передачи в JSON?

В вашей функции save_edit PUT вы используете

    post: JSON.stringify({
        post: edit_area.value
    })

Но в вашем представлении вы ищете

    data = json.loads(request.body)
    edited_post = data["edit_area"]
    post.post = data["edited_post"]

Отправляемый вами JSON выглядит как

{"post": "Here's my edits"}

Так что вам, вероятно, нужно что-то вроде:

    data = json.loads(request.body)
    post.post = data["post"]

Также - fetch использует "body", а не "post", поэтому вы можете изменить вашу функцию put на

    body: JSON.stringify({
        post: edit_area.value
    })
Вернуться на верх