javascript - 提交事件未在 JavaScript 中执行所需的输出
问题描述
我正在为一个电子邮件应用程序设计一个前端,该应用程序调用 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>`;
}
解决方案
我认为发生这种情况的原因是提交事件总是在表单的 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;
})
觉得有帮助就点赞
推荐阅读
- django - Django custom AppConfig breaks the project
- apache-spark - 加入 Dataframe 的相同列后,Drop 功能无法正常工作
- javascript - Referencing classes in other files
- python - 子目录结构破坏了 C++ 扩展构建
- apache-spark - 当我有两个 Spark 流在同一个笔记本中并行运行时,如何使用 saveAsTable 函数?
- python - NameError: name 'K' is not defined
- google-cloud-platform - AWS 类似 GCP 上的帐户链接和合并计费
- ios - 从 Swift 中的 HTTP 请求响应中检索 cookie
- arrays - 在 Julia 中,如何创建一组独特的、空的可变对象?
- r - 如何将包含“0/0”的字符列转换为数字