我正在尝试制作一个表单,该表单采用电子邮件地址并发回交易电子邮件。我在原始 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>
最佳答案
在此之前的一些事情
- 决定要使用 GET 还是 POST,您似乎对使用哪一个感到困惑。我会使用 POST,因为您正在尝试发送电子邮件数据,而不是真正尝试从服务器获取数据。
- 更改您的 app.post Node 功能(假设您想要发布)
- 您需要向服务器发送一个字符串,因此 json stringify
- 由于您的字符串是 json 格式,您需要将 header “Content-Type”更改为“application/json”
- 您需要将请求动词更改为“POST”以匹配您的服务器和您要完成的任务
在您的服务器中,您需要将 app.post 代码替换为(您需要 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');
});
关于javascript - 为什么发送到 Node/Express 服务器的 XMLHttpRequest 中的对象是空的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32084571/