为什么XMLHttpRequest中的对象发送到Node / Express服务器为空？ [英] Why is an object in an XMLHttpRequest sent to a Node/Express server empty?

问题描述

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

I am trying to make a form that takes the email address and sends a transactional email back. I am using a XMLHttpRequest in vanilla JavaScript to send data to the server, but when I look at the data sent from index.html, it is only an empty object on the server side.

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

On the backend I am using Node and Express and Nodemailer. Nodemailer is working properly. I have been trying to figure out why the query object does not have anything in it.

// 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>

推荐答案

之前的一些事情可以工作

A few things before this can work

• 决定是否要使用GET或POST，您似乎对哪个一个使用。我会使用POST，因为您正在尝试发送电子邮件的数据，而不是真正尝试从服务器获取数据。


• 更改您的app.post节点功能（假设您想要发布）


• 您需要向服务器发送一个字符串，因此json stringify


• 由于您的字符串是json格式，您需要更改标题内容类型到application / json


• 您需要将请求动词更改为POST以匹配您的服务器以及您要完成的任务

• Decide whether you want to use GET or POST, you seem to be confused as to which one to use. I would use POST because you're trying to send data for an email and not really trying to get data from the server.
• Change your app.post node function (assuming you want post)
• You need to send a string to the server, hence the json stringify
• Since your string is in json format you need to change the header "Content-Type" to "application/json"
• You need to change your request verb to 'POST' to match your server and what you are trying to accomplish

在您的服务器中，您需要更换app.post代码（您将需要npm install body-parser）

In your server you need to replace the app.post code with (you'll need to 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
  }
});

这应该在客户端上做窍门

This should do the trick on the client

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

Alternatively, you can look at this library for sugar over the HTTP api - axios

如果您使用的是axios，那么简单如

If you're using axios, it's as simple as

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

或者您想要控制收到响应时会发生什么。

or if you want to control what happens when you receive a response.

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

这篇关于为什么XMLHttpRequest中的对象发送到Node / Express服务器为空？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！