問題描述

我正在嘗試制作一個表格，該表格采用電子郵件地址并將交易電子郵件發回.我在 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模板網！