JavaScript одностраничное приложение, как отобразить правильное HTML после отправки формы?

Question

Я пишу почтовый клиент как одностраничное приложение, используя AJAX. У меня есть кнопка, которая переводит вас в форму, где пользователь может ввести необходимые данные для отправки электронного письма, которое вы можете отправить с помощью кнопки. Я хочу, чтобы при отправке электронной почты попадал в отправленный почтовый ящик пользователя , но в настоящее время он всегда перенаправляется к представлению папки входящих сообщений по умолчанию. Я считаю, что это связано с тем, как у меня настроен прослушиватель событий DOMContentLoaded:

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 view
  load_mailbox("inbox");
});

Этот прослушиватель просто настраивает кнопки навигации и устанавливает почтовый ящик по умолчанию. Функция load_mailbox - это простая функция, которая принимает строку желаемого почтового ящика для просмотра и соответствующим образом управляет DOM. Вот моя функция compose_email (), которая предназначена для отображения отправки формы электронной почты и обработки отправки.

function compose_email() {

  // Show compose view and hide other views
  document.querySelector('#emails-view').style.display = 'none';
  document.querySelector('#open-mail-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 = '';

  // Handle sending an email, return to sent inbox after TODO: Not returning to sent inbox
  let form = document.querySelector('#compose-form');
  form.addEventListener('submit', function() {
    const recipients = document.querySelector('#compose-recipients').value;
    const subject = document.querySelector('#compose-subject').value;
    const body = document.querySelector('#compose-body').value;
    fetch('/emails', {
      method: 'POST',
      body: JSON.stringify({
          recipients: recipients,
          subject: subject,
          body: body
      })
    })
    .then(response => response.json())
    .then(result => {
      console.log(result);
    })
    load_mailbox('sent'); //This is not working!!! What to do?
  });
}

После отправки я хочу, чтобы пользователю был показан отправленный им почтовый ящик, то есть в настоящее время не происходит . Вероятно, это связано с тем, что прослушиватель DOMContentLoaded немедленно запускается и переносится в почтовый ящик «входящие». по умолчанию (при refre sh, при первом открытии сайта, et c ..)?

Answer 1

Отправка формы вызывает перезагрузку страницы, потому что действие по умолчанию не предотвращено.

Сначала начните захват объекта события:

form.addEventListener('submit', function(ev) { ...

затем

    ev.preventDefault();

(... и для дополнительной уверенности)

    //...
    load_mailbox('sent');
    return false;

в конце обработчика (не в обратных вызовах обещаний)