Why is the object in XMLHttpRequest sent to the Node / Express server empty?

Question

I am trying to make a form that takes an email address and sends back a transactional email. I use 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 use Node and Express and Nodemailer. Nodemailer is working correctly. I tried to find out why there is nothing in the request object.

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

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 are trying to send data for email and not trying to receive data from the server.
• Change the app.post node function (if you want to send a message)
• You need to send a string to the server, so json stringify
• Since your string is in json format, you need to change the "Content-Type" header to "application / json"
• You need to change your request verb to "POST" so that it matches your server and what you are trying to execute

On your server you need to replace the app.post code (you need to install npm to 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 for XMLHttpRequest

Alternatively you can look at this sugar library via HTTP api - axios

If you use axioms, it is as simple as

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

or if you want to control what happens when you get 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'); });