为什么发送到Node/Express服务器的XMLHttpRequest中的对象为空？

Question

我正在尝试制作一个表单，它会接收电子邮件地址并发回交易电子邮件。我在香草JavaScript中使用XMLHttpRequest将数据发送到服务器，但是当我查看从index.html发送的数据时，它只是服务器端的空对象。

在后端我使用Node和Express和Nodemailer。 Nodemailer工作正常。我一直试图弄清楚为什么查询对象中没有任何东西。

// Here is server.js 
 

 
var express = require('express'); 
 
var nodemailer = require('nodemailer'); 
 
var app = express(); 
 

 
// Send index.html 
 
app.get('/', function(request, response) { 
 
    response.sendfile('index.html'); 
 
}); 
 

 
// Where I should receive data from JS written in index.html 
 
app.post('/send', function(req, res) { 
 
    var mailOptions　 = 　 { 
 
    to: req.query.to, 
 
    subject: req.query.subject, 
 
    text: req.query.text 
 
    } 
 
});

<!-- Here is my index.html with some JS in it --> 
 

 
<div> 
 
    <input id="to" type="text" placeholder="Email" /> 
 
    <input id="subject" type="text" placeholder="subject" /> 
 
    <textarea id="content" cols="20" rows="2" placeholder="Write something"></textarea> 
 
    <button id="submit">Submit</button> 
 
</div> 
 

 
<script> 
 
    // When #submit is clicked it invokes a function to collect values and then makes a XMLHttpRequest like bellow 
 
    data = {to: to, subject: subject, text: text}; 
 
    var request = new XMLHttpRequest(); 
 
    request.open('GET', 'http://localhost:3000/send', true); 
 
    request.send(data); 
 
    } 
 
</script>

Answer 1

此之前，有几件事情可以工作

• 决定是否要使用GET或POST，你似乎混淆为使用哪一个。我会使用POST，因为您尝试为电子邮件发送数据，而不是真正尝试从服务器获取数据。
• 更改app.post节点功能（假设你要交）
• 您需要发送一个字符串到服务器，因此JSON字符串化
• 由于您的字符串是JSON格式，你需要更改标题“内容类型”为‘application/JSON’
• 你需要改变你的要求动词为‘POST’，以配合您的服务器和你所要完成

在你的服务器，你需要更换应用.post code with（你需要npm install body-parser）

var bodyParser = require('body-parser'); 
app.use(bodyParser.json()); // for parsing application/json 
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded 
// Where I should receive data from JS written in index.html 
app.post('/send', function(req, res) { 
    var mailOptions　 = 　 { 
    to: req.body.to, 
    subject: req.body.subject, 
    text: req.body.text 
    } 
}); 

这应该做的伎俩在客户端上

data = {to: to, subject: subject, text: text}; 
var request = new XMLHttpRequest(); 
request.open('POST', 'http://localhost:3000/send', true); 
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
request.send(JSON.stringify(data)); 

替代解决方案的XMLHttpRequest

或者，你可以看看这个库的食糖在HTTP API - axios

如果您使用的是axios，就像

data = {to: to, subject: subject, text: text}; 
axios.post('/user', data); 

或者您想要控制接收到响应时发生的情况。

data = {to: to, subject: subject, text: text}; 
axios.post('/user', data) 
    .then(function (response) { 
    console.log('success'); 
    }) 
    .catch(function (response) { 
    console.log('error'); 
    });