Bad Request - node js ajax post

I'm using express 3.0 and node v0.11.0. I have a button which submits a form and I'm using ajax to post that data as a JSON object to my node server.
The client code is:

$('#contact').submit(function(e) {
console.log('submit called');
var formData = JSON.stringify($('form').serializeObject());
console.log(formData);

$.ajax({
    url: "http://localhost:3000/savedata/",
    type: "POST",
    dataType: 'json',
    data: {objectData: formData},
    contentType: "application/json",
    complete: function() {
      console.log('process complete');
    },
    success: function(data) {
      console.log('process sucess');
    },
    error: function() {
      console.log('process error');
    },
  });
return false;
});

Then on my server:

var express = require('express');
var app = express();
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.cookieParser());
app.use(express.static(__dirname + '/public', {maxAge: 86400000}));
app.engine('.jade', require('jade').__express);

app.post('/savedata', function(req, res) {
  console.log('savedata called');
  console.log(req.body);
  //var resultObject = JSON.parse(req.body.objectData);
  //console.log(resultObject);
  res.end();
});

The problem that I'm facing is that when I use the express.bodyParser() middleware, I get a:

Error: Bad Request
at next (/home/captain/data/lemontreecakes/node_modules/express/node_modules/connect/lib/proto.js:125:13)
at /home/captain/data/lemontreecakes/node_modules/express/node_modules/connect/lib/middleware/bodyParser.js:54:23
at IncomingMessage.<anonymous> (/home/captain/data/lemontreecakes/node_modules/express/node_modules/connect/lib/middleware/json.js:74:60)
at IncomingMessage.EventEmitter.emit (events.js:92:17)
at _stream_readable.js:883:14
at process._tickCallback (node.js:415:13)

This is the console output in my browser:

submit called load.js:33
{"name":"tes","email":"tets@est.com"} load.js:36
POST http://localhost:3000/savedata/ 400 (Bad Request) jquery-1.9.1.min.js:5
process error load.js:54
process complete

So I know that I'm submitting data to my server. If I remove the body parser middle ware from node server, then I get 

savedata called
TypeError: Cannot read property 'objectData' of undefined

I'm thinking that I'm not sending JSON data properly to the server. Any hints will be appreciated.

I'm not completely sure if this solves the problem but try this:

$.ajax({
    ...
    data: JSON.stringify({ "objectData": formData}),
    ...

Try this code instead:

$.ajax({
        url: "/savedata/",
        type: "POST",
        data: formData,
        contentType: "application/json",
        success: function(data) {
            alert('success');
        },
        error: function() {
            alert('error');
        }
    }
);

  • First of all, browser-based AJAX may not do a cross-domain HTTP request (for instance, your website localhost:3000 may not do an AJAX request to google.com or any website other than localhost:3000). So if you really want to do this, let your server handle it.

    Otherwise, as 99% of the time, just use a relative URL (/savedata/).

  • Also, make sure you only send a stringified JSON Object, and not an JSON Object.

    For example '{"test" : 1}' and not {"test" : 1}. So in your case, the stringified object is formData.

I did try this code with example data on a node server, and it worked fine. If you have any additionnal question, feel free to ask.

I can also give you the code if you want it.