我有一个简单的博客网络应用程序。我已经设置了用户登录的功能，现在我正在处理帐户管理。帐户管理的第一部分是让用户更改他们的电子邮件。
我有一个
account.ejsnav.ejs表单很简单，它要求输入新的电子邮件，然后包含第二个文本框以确认他们更改的电子邮件，这些文本框必须匹配才能继续。
这是我遇到麻烦的地方 - 我有一个带有
signup.ejsform.addEventListenerres = await fetch()authRoutes.jsauthController.js我正在尝试调整我的
account.ejsformaccount.ejsaccountPostauthControllerconst form = document.querySelector('form');const form2 = document.querySelector('form');authController.js
变量调整为
form，那么我的
form2将在 MongoDB 中更新用户的电子邮件，在
document.querySelector('form');中我无法理解为什么会这样以及我做错了什么。account.ejs:
<html lang="en">
<%- include("./partials/head.ejs") %>
<body>
<%- include("./partials/nav.ejs") %>
<div class="account content">
<div>
<h2 class="management-header">Account Management for <%= user.email %></h2>
</div>
<div class="alter-email content">
<p>Change Email</p>
<hr>
<form class="alter-email-form" action="/account/<%= user._id %>" method="POST">
<label for="oldEmail">Old Email</label>
<input type="text" id="oldEmail" name="oldEmail" required>
<label for="newEmail">New Email</label>
<input type="text" id="newEmail" name="newEmail" required>
<button>Update Email</button>
</form>
</div>
</div>
<%- include("./partials/footer.ejs") %>
<script>
//THIS IS THE PROBLEM
const form2 = document.querySelector('form');
form.addEventListener('submit', async (e) => {
e.preventDefault();
//get values
const oldEmail = form.oldEmail.value;
const newEmail = form.newEmail.value;
try {
const res = await fetch('/account', {
method: 'POST',
body: JSON.stringify({ oldEmail, newEmail }),
headers: { 'Content-Type': 'application/json' }
});
const data = await res.json();
console.log(data);
if(data.user) {
location.assign('/blogs');
}
}
catch (err) {
console.log(err);
}
});
</script>
</body>
</html>
accountPost
在 authController.js 中：
const accountPost = async (req, res) => {
const id = req.params.id;
const {newEmail, oldEmail} = req.body;
console.log(newEmail, oldEmail);
let user = await User.findById(id);
user.updateOne({
'_id': id,
'email': newEmail
})
.then(result => {
res.redirect('/');
})
}
module.exports = {
accountPost
}
app.js
const express = require('express');
const morgan = require('morgan');
const mongoose = require('mongoose');
const blogRoutes = require('./routes/blogRoutes');
const authRoutes = require('./routes/authRoutes');
const cookieParser = require('cookie-parser');
const { checkUser } = require('./middleware/authMiddleware');
require('dotenv').config();
//express app
const app = express();
//mongoDB connection string
const dbURI = `mongodb+srv://${process.env.blog_username}:${process.env.blog_password}@nodecourse.h4qkmfb.mongodb.net/nodeCourse?retryWrites=true&w=majority`;
mongoose.connect(dbURI)
.then((result) => app.listen(3000))
.catch((err) => console.log(err));
//register view engine
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
res.redirect('/blogs');
});
app.get('/about', (req, res) => {
res.render('about', { title: 'About'});
});
app.use(authRoutes);
//404 page
app.use((req, res) => {
res.status(404).render('404', {title: '404'});
})
尝试：
const form = document.getElementByClassName('.alter-email-form')[0];
或者如果您的其中一个文件中有表格，则可能需要更改为 1 或 2。
然后：
form.addEventListener('submit', async (e) => {