为什么发送到 Node/Express 服务器的 XMLHttpRequest 中

问题描述

我正在尝试制作一个表格，该表格采用电子邮件地址并将交易电子邮件发回.我在 vanilla JavaScript 中使用 XMLHttpRequest 向服务器发送数据，但是当我查看从 index.html 发送的数据时，它只是服务器端的一个空对象.

在后端，我使用的是 Node、Express 和 Nodemailer.Nodemailer 工作正常.我一直在试图弄清楚为什么查询对象中没有任何内容.

//这里是 server.jsvar express = require('express');var nodemailer = require('nodemailer');var app = express();//发送 index.htmlapp.get('/', function(request, response) {response.sendfile('index.html');});//我应该从用 index.html 编写的 JS 接收数据的地方app.post('/send', function(req, res) {var mailOptions = {到:req.query.to，主题:req.query.subject，文本:req.query.text}});

<!-- 这是我的 index.html，里面有一些 JS -->
<input id="to" type="text" placeholder="Email"/><input id="subject" type="text" placeholder="subject"/><textarea id="content" cols="20" rows="2" placeholder="写点东西"></textarea><button id="submit">提交</button></div><脚本>//当#submit 被点击时，它会调用一个函数来收集值，然后像下面这样发出一个 XMLHttpRequestdata = {to: to, subject: subject, text: text};var request = new XMLHttpRequest();request.open('GET', 'http://localhost:3000/send', true);请求.发送(数据)；}</script>

在此之前的一些事情可以工作

• 决定是使用 GET 还是 POST，您似乎对使用哪一个感到困惑.我会使用 POST，因为您正在尝试为电子邮件发送数据，而不是真正尝试从服务器获取数据.
• 更改您的 app.post 节点功能(假设您想要发布)
• 您需要向服务器发送一个字符串，因此 json 字符串化
• 由于您的字符串是 json 格式，您需要将标题Content-Type"更改为application/json"
• 您需要将请求动词更改为POST"以匹配您的服务器以及您要完成的任务

在您的服务器中，您需要将 app.post 代码替换为(您需要 npm install body-parser)

var bodyParser = require('body-parser');app.use(bodyParser.json());//用于解析应用程序/jsonapp.use(bodyParser.urlencoded({extended: true }));//用于解析应用程序/x-www-form-urlencoded//我应该从用 index.html 编写的 JS 接收数据的地方app.post('/send', function(req, res) {var mailOptions = {到:req.body.to，主题:req.body.subject，文本: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 = {to: to, subject: subject, text: text};axios.post('/user', 数据).then(函数(响应){console.log('成功');}).catch(函数(响应){console.log('错误');});

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.

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

• 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

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));

Alternative Solution to XMLHttpRequest

Alternatively, you can look at this library for sugar over the HTTP api - 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');
  });

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