Sending JSON data to server with Expressjs

Question

I have an html form that has several fields which I package in a JSON, and I need to send this to a server. I have the following code on the front end:

var data = {
//data here
};
var xhr = new XMLHttpRequest();
xhr.open("POST","localhost:8000/add",true);
xhr.setRequestHeader("Content-Type","application/json");
xhr.send(data);

And then on the server, I have this code to receive it:

app.post('/add', function(req,res) {
  console.log(req.body.name);
  res.json(req.body.name);
});

It sends nothing; what do I need to do to get it to send the JSON?

Did you try to check req.body (console.log(req.body);) to see if you received any data or not ? — Ezzat Elbadrawy, Aug 04 '18 at 00:46
Possible duplicate of [Express.js POST req.body empty](https://stackoverflow.com/questions/38294730/express-js-post-req-body-empty) — Charlie Fish, Aug 04 '18 at 14:37

score 1 · Answer 1 · answered Aug 03 '18 at 19:01

1

You need to use body-parser to get values in req.body

From npm documents

var express = require('express')
var bodyParser = require('body-parser')

var app = express()

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())

answered Aug 03 '18 at 19:01

Aritra Chakraborty

12,123
3
26
35

I included those, and still nothing gets sent. – Josh Gordon Aug 03 '18 at 21:28

Rahul Kinkar · Answer 2 · 2018-08-04T14:53:38.847

You are not handling the response of post request,and also make sure you are using body parser at backend. So you front end code should be like this:

var data = {name:"xyz"};
var json = JSON.stringify(data);
var xhr = new XMLHttpRequest();
xhr.open("POST","localhost:8000/add",true);
xhr.setRequestHeader('Content-type','application/json; charset=utf-8');
xhr.onload = function () {
    var data = JSON.parse(xhr.responseText);
   if (xhr.readyState == 4 && xhr.status == "201") {
    console.log(data);
  } else {
    console.log(data);
  }
}
xhr.send(json);

And your server side code should be coded like :

 var express = require('express')
   var bodyParser = require('body-parser')

   var app = express();
   // parse application/json
   app.use(bodyParser.json())

  // parse application/x-www-form-urlencoded
    app.use(bodyParser.urlencoded({ extended: false }));

    app.post('/add', function(req,res) {
      console.log(req.body.name);
      res.status(201).json(req.body.name);
  });

score 0 · Answer 3 · answered Aug 04 '18 at 18:13

I tested it with this code and it success with me:

Client code same as your code.

Server Code:

const express = require('express');
const app = express();

app.use(express.json());

app.post('/add', function(req,res) {
  console.log(req.body.name);
  res.json(req.body.name);
});

Sending JSON data to server with Expressjs

3 Answers3