提交事件不会在 JavaScript 中执行所需的输出

Question

我正在为电子邮件应用程序设计一个前端，该应用程序通过 API 调用来发送和接收电子邮件。 首先，我试图通过向/emails路由发送 POST 请求来成功发送电子邮件，该请求传入我从用户提交的表单中抓取的收件人、主题和正文。 用户提交表单后，我想加载sent邮箱视图。 我的页面加载了发送的视图，但很快就会出现compose view ，我似乎无法弄清楚原因。

收件箱.html

{% extends "mail/layout.html" %}
{% load static %}

{% block body %}
    <h2>{{ request.user.email }}</h2>

    <button class="btn btn-sm btn-outline-primary" id="inbox">Inbox</button>
    <button class="btn btn-sm btn-outline-primary" id="compose">Compose</button>
    <button class="btn btn-sm btn-outline-primary" id="sent">Sent</button>
    <button class="btn btn-sm btn-outline-primary" id="archived">Archived</button>
    <a class="btn btn-sm btn-outline-primary" href="{% url 'logout' %}">Log Out</a>
    <hr>

    <div id="emails-view">
    </div>

    <div id="compose-view">
        <h3>New Email</h3>
        <form id="compose-form">
            <div class="form-group">
                From: <input disabled class="form-control" value="{{ request.user.email }}">
            </div>
            <div class="form-group">
                To: <input id="compose-recipients" class="form-control">
            </div>
            <div class="form-group">
                <input class="form-control" id="compose-subject" placeholder="Subject">
            </div>
            <textarea class="form-control" id="compose-body" placeholder="Body"></textarea>
            <input type="submit" class="btn btn-primary"/>
        </form>
    </div>
{% endblock %}

{% block script %}
    <script src="{% static 'mail/inbox.js' %}"></script>
{% endblock %}

收件箱.js

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

  var form = document.querySelector('#compose-form');

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

    // e.preventDefault();

    let sent = false;

    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 => {
        // Print result
        console.log(result);
        sent = true;
    });

    load_mailbox('sent');

    return false;

  })
  
  
  // 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
  if (sent === false) {
    load_mailbox('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 = '';
}

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>`;
}

Answer 1

我认为发生这种情况的原因是提交事件总是在表单的 action 属性中附加到 url 的重定向。 如果缺少 action 属性，默认重定向将变为同一页面。

我建议您根本不要使用提交事件。 由于您无论如何都要手动编译表单数据（对于 /email 请求），只需将提交按钮更改为普通的<button>标记，然后将您为提交所做的所有过程添加到简单的“单击”

代码看起来像这样（假设您的发送电子邮件按钮的id 是 'send-email' ）

document.querySelector("#send-email").addEventListener('click',function(){

let sent = false;

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 => {
    // Print result
    console.log(result);
    sent = true;
});

load_mailbox('sent');

return false;

})

如果觉得有帮助，请点赞