"400 Bad Request" response for AJAX request

Question

I have the following jQuery AJAX request:

// collect form data and create user obj
var user = new User();
user.firstname =  $("#usrFirstName").val();
user.lastname =  $("#usrSurname").val();
user.role =  $("#usrRole").val();

// actual ajax request
$.ajax({
    type: 'POST',
    url : 'http://awesome-url',
    crossDomain: true,
    data: user,
    contentType:"application/json; charset=utf-8",
    dataType: 'json'
}).done(function(data, status) {
    alert(JSON.stringify(data));
}).fail(function(data, status) {
    alert(status);
    alert(JSON.stringify(data));
});

The response from the Server is:

"status":400,"statusText":"Bad Request"
"The request sent by the client was syntactically incorrect."

The server is running Spring-MVC. But as far as I can tell it is working correctly. Because if I'm sending a request manually with Postman and the following configuration it works.

Header:

Content-Type application/json; charset=utf-8

Content:

{"firstname":"alex","lastname":"lala","role":"admin"}

I have to mention that it is a cross-domain request (for the time developing, it will be hosted on the same domain as the server later). I did disable the security settings in the browser and AJAX requests to the server are working fine (as long as I don't have to send data).

Gunboat

What happens when you form that same exact request in a browser-based REST tool and submit it? Have you tried to stringify your User object before sending? – Boarder

If the server doesn’t like the data it receives, then you should ask the server why – meaning, log what request is actually coming in, check log files, etc. – Otey

I just tried stringify and it works. I'm very confused because I thought this is what happens if you throw an object at jQuery.ajax. Post it as an answer and I'll accept it. – Gunboat

Answer 1

you need to serialize your json, try:

$.ajax({
    type: 'POST',
    url : 'http://awesome-url',
    crossDomain: true,
    data: JSON.stringify(user),
    contentType:'application/json; charset=utf-8',
    dataType: 'json'
})

Phantasm

Answer 2

JSON.stringify() method is used to turn a javascript object into json string. You need to have this. In addition it is better to include success and error portions in the AJAX.

$.ajax({
    type: 'POST',
    url : 'http://awesome-url',
    crossDomain: true,
    data: JSON.stringify(user), // turn a javascript object into json string
    contentType:'application/json; charset=utf-8',
    dataType: 'json',
    success: function (html) {
            alert(html);
    }, error: function (error) {
            alert(error);
    }
})

Uranography