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

Question

我正在尝试制作一个表格，该表格采用电子邮件地址并发回交易电子邮件。我在 vanilla 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 节点函数（假设您想要 post）
您需要向服务器发送一个字符串，因此 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

查看此库中的 sugar

如果您使用的是 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');
  });

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

Why is an object in an XMLHttpRequest sent to a Node/Express server empty?

javascript

xmlhttprequest

node.js

express