CODEWITHSUNDEEP
javascriptjsonajaxnode.js
man-r
man-r

Reputation: 218

AJAX POST JSON from javascript to nodejs server

I'm trying to send a JSON object from javaScript to node.js server. I'm using a standard XMLHttpRequest to send it from javascript and a standard node.js code.

Two codes seem to be communicating normally however the node.js always gives me an empty JSON object. I'm not really sure what am I doing wrong.

This is my javascript code:

<html>
  <head>
    <script>
      function xhrPost() {
        var data = {"name":"John", "time":"2pm"};
        var xhr = new XMLHttpRequest();
        xhr.withCredentials = true;
        xhr.addEventListener("readystatechange", function () {
          if (this.readyState === 4) {
            console.log(this.responseText);
          }
        });

        xhr.open("POST", "http://[serverIP]:8080/addUser");
        xhr.setRequestHeader("cache-control", "no-cache");
        xhr.setRequestHeader("content-type", "application/json;charset=UTF-8");
        xhr.send(JSON.stringify(data));
      }
    </script>
  </head>

  <body onload="xhrPost()">

  </body>
</html>

and this is my node.js code:

var express = require("express");
var myParser = require("body-parser");
var app = express();

  app.use(myParser.urlencoded({extended : true}));
  app.post("/addUser", function(request, response) {
      console.log(request.body); // this line allways produce {}
      response.send("Message received.");
      response.end();
});

app.listen(8080);

Upvotes: 1

Views: 2510

Answers (3)

Micah Grossman
Micah Grossman

Reputation: 1

This was the most helpful stackoverflow page to solve my problem as well.

I was trying to get form fields, formulate them into a JSON on the client, then send to the server to use the fields for a MySQL call to a separate database. 

Object {name: "", reps: "1", weight: "1", date: "", lbs: "0"}

I was able to get the object logging correctly on the client, yet every time I tried to send the data to the server, 

console.log(req.body);

Would always return on the server as either

{}
undefined

Server side my setup with functioning data passing is

var express = require('express');
var mysql = require('./dbcon.js');
var app = express();
var handlebars = require('express-handlebars').create({defaultLayout:'main'});
var request = require('request');
var myParser = require("body-parser");
var async = require('async');
app.set('view engine', 'handlebars');
app.set('port', Number(process.env.PORT || 3000));
app.use(myParser.json());
app.use(express.static('public'));
app.engine('handlebars', handlebars.engine);

On my client side js file, I have a function upon form submit that does:

var data = {
  "name":document.getElementById("fname").value,
  "reps":document.getElementById("freps").value,
  "weight":document.getElementById("fweight").value,
  "date":document.getElementById("fdate").value,
  "lbs":bool
};
...
req.open("POST", "/insert", true);
req.setRequestHeader("content-type", "application/json;charset=UTF-8");
...
req.send(JSON.stringify(data));

Upvotes: -1

Zeeshan Hassan Memon
Zeeshan Hassan Memon

Reputation: 8325

After following line:

var myParser = require("body-parser");

You should add on more line as:

 var myParser = require("body-parser");

app.use(myParser.json());// parse application/json

Upvotes: 3

Dmitriy
Dmitriy

Reputation: 3765

You have to use myParser.json() as a middleware. See more about it in https://github.com/expressjs/body-parser#bodyparserjsonoptions

Upvotes: 3

Related Questions