首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用vanilla JS ajax发送数据,并使用Node api读取数据

使用vanilla JS ajax发送数据,并使用Node api读取数据
EN

Stack Overflow用户
提问于 2018-08-27 21:49:15
回答 2查看 115关注 0票数 1

我在客户端有这样的代码:

代码语言:javascript
运行
复制
sendMail(e) {
    e.preventDefault();
    var name = document.getElementById('name').value;
    var contactReason = document.getElementById('contactReason').value;
    var email = document.getElementById('email').value;
    var additionalInfo = document.getElementById('additionalInfo').value;
    var body = {
        name: name,
        contactReason: contactReason,
        email: email,
        additionalInfo: additionalInfo,
    };
    console.log(body);
    fetch('http://localhost:4000/', {
        method: 'POST',
        body: body.toString(),
    }).then(r => console.log(r)).catch(e => console.log(e));
}

而这种方法是可行的。它将对象记录到控制台,并将一些内容发送到后端。

这是我的Node调用:

代码语言:javascript
运行
复制
var express = require('express');
var router = express.Router();
var cors = require('cors');
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({extended: true}));
app.use(cors());
app.options('*', cors());

var a = '=';
router.post('/', (req, res, next) => {
        console.log('mailing');
        console.log(a);
        console.log(req.body);
        a += '=';
        var nodemailer = require('nodemailer');

        var transporter = nodemailer.createTransport({
            host: "smtp.gmail.com", // hostname
            auth: {
                user: '******',
                pass: '******'
            }
        });

        let mailOptions = {
            from: `${req.body.name} ${req.body.email}`, // sender address
            to: 'alexander.ironside@mygeorgian.ca', // list of receivers
            subject: 'Email from UczSieApp contact form', // Subject line
            text: 'Hello world ', // plaintext body
            html: `
                        <h4>Imie: ${req.body.name}</h4>
                        <h4>Email: ${req.body.email}</h4>
                        <h4>Powod kontaktu: ${req.body.contactReason}</h4>
                        <p>Wiadomosc: ${req.body.additionalInfo}</p>
                        `
        };

        // send mail with defined transport object
        transporter.sendMail(mailOptions, function (error, info) {
            if (error) {
                return console.log(error);
            }

            console.log('Message sent: ' + info.response);
        });
    }
);
module.exports = router;

那么代码现在要做的是:

正在创建对象,正在向Node后端发送某些内容(不确定确切内容),并且正在发送一封电子邮件。但是req.body被记录为{}

我想做的是:

读取以body格式发送到后端的值,然后发送包含此数据的电子邮件。

我遗漏了什么?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-09-27 18:40:24

我使用GET而不是POST,这解决了我的问题。这是一种欺骗,但它是有效的。

票数 1
EN

Stack Overflow用户

发布于 2018-08-27 21:54:21

应添加到fetch

代码语言:javascript
运行
复制
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
            },

            body: JSON.stringify(body),

所有正确的代码

前端

代码语言:javascript
运行
复制
sendMail(e) {
    e.preventDefault();
    var name = document.getElementById('name').value;
    var contactReason = document.getElementById('contactReason').value;
    var email = document.getElementById('email').value;
    var additionalInfo = document.getElementById('additionalInfo').value;
    var body = {
        name: name,
        contactReason: contactReason,
        email: email,
        additionalInfo: additionalInfo,
    };
    console.log(body);
    fetch('http://localhost:4000/', {
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },

        body: JSON.stringify(body),
        method: 'POST',
    }).then(r => console.log(r)).catch(e => console.log(e));
}

后端

代码语言:javascript
运行
复制
var express = require('express');
var router = express.Router();
var cors = require('cors');
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({extended: true}));
app.use(cors());
app.options('*', cors());

var a = '=';
router.post('/', (req, res, next) => {
        console.log('mailing');
        console.log(a);
        console.log(req.body);
        a += '=';
        var nodemailer = require('nodemailer');

        var transporter = nodemailer.createTransport({
            host: "smtp.gmail.com", // hostname
            auth: {
                user: '******',
                pass: '******'
            }
        });

        let mailOptions = {
            from: `${req.body.name} ${req.body.email}`, // sender address
            to: 'alexander.ironside@mygeorgian.ca', // list of receivers
            subject: 'Email from UczSieApp contact form', // Subject line
            text: 'Hello world ', // plaintext body
            html: `
                        <h4>Imie: ${req.body.name}</h4>
                        <h4>Email: ${req.body.email}</h4>
                        <h4>Powod kontaktu: ${req.body.contactReason}</h4>
                        <p>Wiadomosc: ${req.body.additionalInfo}</p>
                        `
        };

        // send mail with defined transport object
        transporter.sendMail(mailOptions, function (error, info) {
            if (error) {
                return console.log(error);
            }

            console.log('Message sent: ' + info.response);
        });
    }
);
module.exports = router;
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52040869

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档