javascript - Why is an object in an XMLHttpRequest sent to a NodeExpress server empty? - Stack Overflow

admin管理员组

文章数量:1278854

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>

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>

• javascript
• node.js
• express
• xmlhttprequest

Share Improve this question Follow edited Aug 20, 2015 at 3:09 jayscript asked Aug 19, 2015 at 0:18 jayscriptjayscript 31922 gold badges55 silver badges1313 bronze badges 4

• Your XMLHttpRequest sends a 'GET' request but your express server is expecting a 'POST' request – yangli-io Commented Aug 19, 2015 at 0:36
• @PHPglue the code he put up is a snippet of his actual code hence why it's undefined – yangli-io Commented Aug 19, 2015 at 0:45
• 1 Nothing is sent with .send() using GET, just the .open() URL is used. If you want to send data use POST or append the data to the URL like: ?to=val1&subject=val2&text=val3. Either that or use jQuery, then you can just pass that data Object. – StackSlave Commented Aug 19, 2015 at 0:55
• Really sorry about the mistake. I accidentally left .post instead of .get because I was trying out both pairs in different situation. – jayscript Commented Aug 19, 2015 at 0:58

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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 acplish

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

本文标签： javascriptWhy is an object in an XMLHttpRequest sent to a NodeExpress server emptyStack Overflow