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

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

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

inBox.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 %}

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

解决方法

我认为发生这种情况的原因是提交事件总是有一个重定向附加到表单的 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;

})

觉得有帮助就点个赞