Повторное использование ответа JSON после запроса Fetch

Я пытаюсь использовать JSON-ответ от сервера и вывести для пользователя сообщение об ошибке. Я успешно получаю JSON ответ и функция alert работает так, как я ожидаю, но на самом деле мне нужно вставить элемент

в DOM, но когда конструкция fetch.then заканчивается, меня перенаправляют на корень '/' и Django сервер стирает шаблон, с которым я пытаюсь работать. На стороне Django я использую функцию JsonRequest со статус-кодом=400. Что я делаю не так? Пожалуйста, дайте мне подсказку. Мой JS код выглядит следующим образом:

document.addEventListener('DOMContentLoaded', function() {

  // Use buttons to toggle between views
  document.querySelector('#inbox').addEventListener('click', () => load_mailbox('inbox'));
  document.querySelector('#sent').addEventListener('click', () => load_mailbox('sent'));
  document.querySelector('#archived').addEventListener('click', () => load_mailbox('archive'));
  document.querySelector('#compose').addEventListener('click', compose_email);

  // By default, load the inbox
  load_mailbox('inbox');
});

function compose_email() {

  // Show compose view and hide other views
  document.querySelector('#emails-view').style.display = 'none';
  document.querySelector('#compose-view').style.display = 'block';

  // Clear out composition fields
  document.querySelector('#compose-recipients').value = '';
  document.querySelector('#compose-subject').value = '';
  document.querySelector('#compose-body').value = '';

  // Send email
  document.querySelector("#compose-form").onsubmit = function() {
    let composeView = document.querySelector("#emails-view");

    fetch('/emails', {
      method: 'POST',
      body: JSON.stringify({
        recipients: document.querySelector("#compose-recipients").value,
        subject: document.querySelector("#compose-subject").value,
        body: document.querySelector("#compose-body").value
      })
    })
    .then(response => response.json())
    .then(result => {
      let p = `<p>${result.error}</p>`;
      composeView.append(p);
      alert(result.error);
    })
  }
}

function load_mailbox(mailbox) {
  
  // Show the mailbox and hide other views
  document.querySelector('#emails-view').style.display = 'block';
  document.querySelector('#compose-view').style.display = 'none';

  // Show the mailbox name
  document.querySelector('#emails-view').innerHTML = `<h3>${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)}</h3>`;
}

Вернуться на верх