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
– Ezzat Elbadrawy, Commented Aug 4, 2018 at 0:46

Aritra Chakraborty · Accepted Answer · 2018-08-03 19:01:22Z

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 3, 2018 at 19:01

Aritra Chakraborty

12.6k3 gold badges30 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Josh Gordon Over a year ago

I included those, and still nothing gets sent.

Rahul Kinkar · Accepted Answer · 2018-08-04 14:53:38Z

0

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

edited Aug 4, 2018 at 14:53

answered Aug 4, 2018 at 14:25

Rahul Kinkar

215 bronze badges

1 Comment

Neil S3ntence Over a year ago

this is now all blocked by CORS policy

Ezzat Elbadrawy · Accepted Answer · 2018-08-04 18:13:21Z

0

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

answered Aug 4, 2018 at 18:13

Ezzat Elbadrawy

1421 silver badge3 bronze badges

Collectives™ on Stack Overflow

Sending JSON data to server with Expressjs

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related