爲什麼發送到Node/Express服務器的XMLHttpRequest中的對象爲空？

Question

我正在嘗試製作一個表單，它會接收電子郵件地址併發回交易電子郵件。我在香草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節點功能（假設你要交）
• 您需要發送一個字符串到服務器，因此JSON字符串化
• 由於您的字符串是JSON格式，你需要更改標題「內容類型」爲‘application/JSON’
• 你需要改變你的要求動詞爲‘POST’，以配合您的服務器和你所要完成

在你的服務器，你需要更換應用.post code with（你需要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

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