問(wèn)題描述

我正在嘗試制作一個(gè)表格，該表格采用電子郵件地址并將交易電子郵件發(fā)回.我在 vanilla JavaScript 中使用 XMLHttpRequest 向服務(wù)器發(fā)送數(shù)據(jù)，但是當(dāng)我查看從 index.html 發(fā)送的數(shù)據(jù)時(shí)，它只是服務(wù)器端的一個(gè)空對(duì)象.

在后端，我使用的是 Node、Express 和 Nodemailer.Nodemailer 工作正常.我一直在試圖弄清楚為什么查詢(xún)對(duì)象中沒(méi)有任何內(nèi)容.

//這里是 server.jsvar express = require('express');var nodemailer = require('nodemailer');var app = express();//發(fā)送 index.htmlapp.get('/', function(request, response) {response.sendfile('index.html');});//我應(yīng)該從用 index.html 編寫(xiě)的 JS 接收數(shù)據(jù)的地方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="寫(xiě)點(diǎn)東西"></textarea><button id="submit">提交</button></div><腳本>//當(dāng)#submit 被點(diǎn)擊時(shí)，它會(huì)調(diào)用一個(gè)函數(shù)來(lái)收集值，然后像下面這樣發(fā)出一個(gè) XMLHttpRequestdata = {to: to, subject: subject, text: text};var request = new XMLHttpRequest();request.open('GET', 'http://localhost:3000/send', true);請(qǐng)求.發(fā)送(數(shù)據(jù))；}</script>

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

• 決定是使用 GET 還是 POST，您似乎對(duì)使用哪一個(gè)感到困惑.我會(huì)使用 POST，因?yàn)槟趪L試為電子郵件發(fā)送數(shù)據(jù)，而不是真正嘗試從服務(wù)器獲取數(shù)據(jù).
• 更改您的 app.post 節(jié)點(diǎn)功能(假設(shè)您想要發(fā)布)
• 您需要向服務(wù)器發(fā)送一個(gè)字符串，因此 json 字符串化
• 由于您的字符串是 json 格式，您需要將標(biāo)題Content-Type"更改為application/json"
• 您需要將請(qǐng)求動(dòng)詞更改為POST"以匹配您的服務(wù)器以及您要完成的任務(wù)

在您的服務(wù)器中，您需要將 app.post 代碼替換為(您需要 npm install body-parser)

var bodyParser = require('body-parser');app.use(bodyParser.json());//用于解析應(yīng)用程序/jsonapp.use(bodyParser.urlencoded({extended: true }));//用于解析應(yīng)用程序/x-www-form-urlencoded//我應(yīng)該從用 index.html 編寫(xiě)的 JS 接收數(shù)據(jù)的地方app.post('/send', function(req, res) {var mailOptions = {到:req.body.to，主題:req.body.subject，文本:req.body.text}});

這應(yīng)該可以在客戶(hù)端上解決問(wèn)題

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 的替代解決方案

或者，您可以通過(guò) HTTP api 查看這個(gè)糖庫(kù) - axios

如果你用的是axios，那么簡(jiǎn)單

data = {to: to, subject: subject, text: text};axios.post('/user', 數(shù)據(jù));

或者如果您想控制收到回復(fù)時(shí)發(fā)生的情況.

data = {to: to, subject: subject, text: text};axios.post('/user', 數(shù)據(jù)).then(函數(shù)(響應(yīng)){console.log('成功');}).catch(函數(shù)(響應(yīng)){console.log('錯(cuò)誤');});

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

這篇關(guān)于為什么發(fā)送到 Node/Express 服務(wù)器的 XMLHttpRequest 中的對(duì)象是空的?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！