在我的应用程序中，我有一个带有一些字段的表单和一个提交按钮。在单击时，此按钮使用express发出POST请求。然后，我使用sequelize将表单数据添加到数据库中。另外，我正在使用mailer在进行的每个POST上发送表单数据的电子邮件。问题在于每次提交单击都会发出两个POST请求，而不是一个。
这是我的POST请求代码。消息是续集模型。
// Dependencies
// =============================================================
var Message = require("../models/message.js");
var nodemailer = require('nodemailer');
// Mailer options
//===============================================================
const transporter = nodemailer.createTransport({
host: 'smtp.ethereal.email',
port: 587,
auth: {
user: 'MYUSER',
pass: 'MYPASS'
}
});
// Routes
// =============================================================
module.exports = function (app) {
app.post("/api/contact", function (req, res) {
console.log("Message Data:");
console.log(req.body);
Message.create({
firstName: req.body.firstName,
lastName: req.body.lastName,
email: req.body.email,
subject: req.body.subject,
message: req.body.message,
}).then(function (results) {
var mailOptions = {
from: 'FROM-EMAIL',
to: 'TO-EMAIL',
subject: results.subject,
text: results.message
};
transporter.sendMail(mailOptions, function (error, info) {
if (error) {
return console.log(error);
} else {
console.log('Email sent: ' + info.response);
}
});
});
res.end();
});
};
我的前端：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>A-Scan</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Orbitron:900" rel="stylesheet">
<!-- Materialize Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!-- Materialize JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<!-- My CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- My JavaScript -->
<script src="assets/javascript/app.js"></script>
</head>
<body>
<main>
<nav>
<div class="nav-wrapper red darken-4 z-depth-3">
<div class="customAlign left">
</div>
<a href="/" class="brand-logo white-text">A-Scan</a>
<a href="#" data-activates="slide-out" class="white-text button-collapse"><i class="material-icons">menu</i></a>
<p class="center brand-logo white-text headerFont" id="contactHeader" style="margin: 0px;">Contact</p>
<ul class="right hide-on-med-and-down">
<li><a href="/" class="white-text bold waves-effect waves-red"><i class="white-text material-icons left">home</i>Home</a></li>
<li><a href="/about" class="white-text bold waves-effect waves-red"><i class="white-text material-icons left">lightbulb_outline</i>Why
A-Scan?</a></li>
<li><a href="/contact" class="white-text bold waves-effect waves-red"><i class="white-text material-icons left">contact_mail</i>Contact</a></li>
</ul>
</div>
</nav>
<ul id="slide-out" class="side-nav">
<li><a href="/"><i class="material-icons left sidenav-close">home</i>Home</a></li>
<li><a href="/about"><i class="material-icons left sidenav-close">lightbulb_outline</i>Why
A-Scan?</a></li>
<li><a href="/contact"><i class="material-icons left sidenav-close">contact_mail</i>Contact</a></li>
</ul>
<div class="container">
<div class="row">
<div class="col s12">
<p style="font-size: 2em; font-weight: 300;">
<br>
Questions? Quotations?
<br><br>
Send us a message
</p>
</div>
</div>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="subject" type="text" class="validate">
<label for="subject">Subject</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="message" class="materialize-textarea"></textarea>
<label for="textarea1">Message</label>
</div>
</div>
<div class="row">
<div class="col s12">
<a id="submit" class="red darken-4 waves-effect waves-red btn">Submit</a>
</div>
</div>
<div class="row">
<div class="col s12">
<h5 class=" grey-text text-darken-3">
Send us an email:
</h5>
<a href="mailto:shai@ascan-llc.com">shai@ascan-llc.com</a>
</div>
</div>
</form>
</div>
</div>
</main>
<script>
$("#submit").on("click", function (event) {
event.preventDefault();
var messageContent = {
firstName: $("#first_name").val().trim(),
lastName: $("#last_name").val().trim(),
email: $("#email").val().trim(),
subject: $("#subject").val().trim(),
message: $("#message").val().trim(),
}
$.post("/api/contact", messageContent, function (data) {
}).then(function (data) {
$("#first_name").val('');
$("#last_name").val('');
$("#email").val('');
$("#subject").val('');
$("#message").val('');
});
})
</script>