CODEWITHSUNDEEP
node.jsjqueryexpress
Nilath
Nilath

Reputation: 133

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":"[email protected]"} 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.

Upvotes: 4

Views: 8272

Answers (2)

Gus Monod
Gus Monod

Reputation: 110

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.

Upvotes: 3

Friederike
Friederike

Reputation: 1282

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

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

Upvotes: 3

Related Questions