Отправка данных в базу данных через fetch и последующее отображение этих данных на html-странице через fetch снова без отправки формы или обновления страницы

У меня есть приложение на django. Я набираю комментарий в форме и отправляю его в базу данных через fetch.

мой js-код

document.getElementById("comment-form").onsubmit = function write_comment(e) {
        e.preventDefault();
        const sxolio = document.getElementsByName("say")[0].value;

        fetch('/comment', {
        method: 'POST',
        body: JSON.stringify({
            say: sxolio
        })
    })
    .then(response => response.json())
    .then(result => {
    //print result
    console.log(result);
});

my views.py

@requires_csrf_token
@login_required(login_url = 'login')#redirect when user is not logged in
def comment(request):
    if request.method != 'POST':
        return JsonResponse({"error": "POST request required."}, status=400)
    new_comment = json.loads(request.body)
    say = new_comment.get("say", "")
    user = request.user
    comment = Comment(
        user = user,
        say = say,
        photo = Userimg.objects.get(user = user).image
        )
    comment.save()
    return JsonResponse({"message": "Comment posted."}, status=201)

Далее я хочу отобразить этот комментарий и все остальные данные из моей базы данных на моей html-странице без обновления. В тот момент, когда я нажимаю кнопку post, я хочу, чтобы комментарий был отображен. Я не хочу обновлять страницу с помощью какого-то элемента.innerHTML = data.

мой js-код

function display_comments() {
    fetch('/all_comments') 
  .then(response => response.json())
  .then(all_comments => {
   do some stuff

my views.py

@login_required(login_url = 'login')#redirect when user is not logged in
def all_comments(request):
    all_comments = Comment.objects.order_by("-date").all()
    print(all_comments[0].serialize())
    return JsonResponse([comment.serialize() for comment in all_comments], safe=False)

Если я использую preventDefault, я вижу, что моя база данных была обновлена, но я не могу получить данные. Если я пропускаю prevent default, все работает нормально, но моя страница обновляется одновременно. Есть ли способ сделать и то и другое без обновления страницы?

Наиболее вероятная проблема заключается в том, что запрос представления all_comments выполняется до того, как comment закончил сохранение в БД.

Важно, чтобы ответ для comment был полностью возвращен до начала выборки для all_comments. Этого можно добиться, выполнив следующее...

function display_comments() {
    fetch('/all_comments') 
    .then(response => response.json())
    .then(all_comments => {
        console.log(all_comments);
    });
}

document.getElementById("comment-form").onsubmit = function write_comment(e) {
    e.preventDefault();
    const sxolio = document.getElementsByName("say")[0].value;

    fetch('/comment', {
        method: 'POST',
        body: JSON.stringify({
            say: sxolio
        })
    })
    .then(response => response.json())
    .then(result => {
        // print result
        console.log(result);

        // The request to /comment has finished it is now safe to request all 
        // comments.
        display_comments();
    });
}
Вернуться на верх