【发布时间】:2021-02-26 17:39:08
【问题描述】:
我正在为我的 node.js 和 express web 应用程序创建一个简单的联系表单,并且我正在使用 nodemailer 来执行此操作。
到目前为止,一切正常 - 信息记录在服务器上,并通过电子邮件发送到所需的收件箱。然而!所有信息(fname、lname、电话、公司和评论)都包含在消息中,但电子邮件部分返回为 --- email: ''。不是错误,也不是空白。
还要明确——电子邮件:''——出现在服务器中——但在通过该功能发送的电子邮件上,没有电子邮件标题或空间可供提供。
我已尝试重新格式化 html 正文部分并尝试调试表单或 javascript 的任何问题,但结果为空。
任何帮助将不胜感激!谢谢!
app.js 布局如下:
//jshint eversion:6
const http = require('http')
const express = require("express");
const bodyParser = require("body-parser")
const ejs = require('ejs');
const nodemailer = require('nodemailer');
const hostname = '127.0.0.1';
const path = require('path');
const port = 3000;
const app = express();
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({
extended: false
}));
app.use(express.json());
// custom middleware to log data access
const log = function (request, response, next) {
console.log(`${new Date()}: ${request.protocol}://${request.get('host')}${request.originalUrl}`);
console.log(request.body); // make sure JSON middleware is loaded first
next();
}
app.use(log);
// end custom middleware
app.use(express.static('public'));
app.use(express.static('images'));
app.get("/", function (req, res) {
res.render("index");
});
app.get("/prices", function (req, res, ) {
res.render("prices");
});
app.get("/about", function (req, res, ) {
res.render("about");
});
app.get("/contact", function (req, res, ) {
res.render("contact");
});
module.exports = function () {
this.Categories = require('tools.js');
}
// HTTP POST
app.post("/ajax/email", function (request, response) {
// create reusable transporter object using the default SMTP transport
const transporter = nodemailer.createTransport({
host: "smtp.gmail.com",
port: 465,
secure: true,
auth: {
user: "XXXXXXXX@gmail.com", // this should be YOUR GMAIL account
pass: "XXXXXX" // this should be your password
}
});
var textBody = `FROM: ${request.body.fname} EMAIL: ${request.body.email} MESSAGE: ${request.body.comment}`;
var htmlBody = `<h2>Mail From Contact Form</h2> <p>from: ${request.body.fname} ${request.body.lname} </p> <p>${request.body.email}</p> <p>${request.body.phone}</p> <p>${request.body.company}</p><p>${request.body.comment}</p>`;
var mail = {
from: "DeltaDesignsGlobal@gmail.com", // sender address
to: "james.a.vandenberg@gmail.com", // list of receivers (THIS COULD BE A DIFFERENT ADDRESS or ADDRESSES SEPARATED BY COMMAS)
subject: "Mail From Contact Form", // Subject line
text: textBody,
html: htmlBody
};
// send mail with defined transport object
transporter.sendMail(mail, function (err, info) {
if (err) {
console.log(err);
response.json({
message: "message not sent: an error occured; check the server's console log"
});
} else {
response.json({
message: `Thanks for reaching out! We'll contact you ASAP`
});
}
});
});
const PORT = process.env || port;
// const server = http.createServer((req, res) => {
// res.statusCode = 200;
// res.setHeader('Content-Type', 'text/plain');
// res.end('Hello World! NodeJS \n');
// });
app.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
形式和Java是:
<div class="contact-form" id="contact-id">
<form action="/ajax/email" class="contact-form" method="POST" onsubmit="return submitEmailForm(this);">
<div class="form-group">
<label class="control-label col-sm-2" for="fname">First Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="fname" placeholder="Enter First Name" name="fname">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="lname">Last Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lname" placeholder="Enter Last Name" name="lname">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="phone">Phone:</label>
<div class="col-sm-10">
<input type="tel" class="form-control" id="phone" placeholder="Enter Phone Number" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="company">Company:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="company" placeholder="Enter Company Name" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="comment">Question:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" id="comment">What services are you interested in?</textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- <hr>
<div class="contactQuote">
<h1>Coming together is a beginning, <br>
staying together is progress, <br>
& working together is success.
</h1>
</div>
<hr> -->
<!-- <div col-12 class="contactCollabImg">
<img class="contactImg2" src="images/contactcollabImg.jpg" alt="" srcset="">
</div> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
function submitEmailForm(form) {
var obj = new XMLHttpRequest();
obj.onreadystatechange = function(){
if(obj.readyState == 4){
if(obj.status == 200){
var res = JSON.parse(obj.responseText);
alert(res.message);
}
else{
alert("XMLHttp status " + obj.status + ":Failed to Send Message " + obj.statusText);
}
}
};
obj.open("post", form.action, true);
obj.setRequestHeader("Content-Type", "application/json"); // NOTICE: "application/json"
obj.send(JSON.stringify({ fname: form.fname.value, lname: form.lname.value, email: form.email.value, phone: form.phone.value, company: form.company.value, comment: form.comment.value }));
return false;
}
</script>
【问题讨论】:
标签: jquery node.js express nodemailer