jQuery AJAX and JSON format

Question

I have a webservice that expects to receive JSON, like so:

{"first_name":"test","last_name":"teste","email":"[email protected]","mobile":"+44 22 2222 2222", "password":"testing"} 

My AJAX call in jQuery:

$.ajax({         type: "POST",         url: hb_base_url + "consumer",         contentType: "application/json",         dataType: "json",         data: {             first_name: $("#namec").val(),             last_name: $("#surnamec").val(),             email: $("#emailc").val(),             mobile: $("#numberc").val(),             password: $("#passwordc").val()         },         success: function(response) {             console.log(response);         },         error: function(response) {             console.log(response);         }     }); 

Is there any way to check the format in which my data is being sent? I'm supposedly not sending correct JSON to the server (that is the first step in validation).

Is my jQuery code sending valid JSON or did I miss something?

Answer 1

You aren't actually sending JSON. You are passing an object as the data, but you need to stringify the object and pass the string instead.

Your dataType: "json" only tells jQuery that you want it to parse the returned JSON, it does not mean that jQuery will automatically stringify your request data.

Change to:

$.ajax({         type: "POST",         url: hb_base_url + "consumer",         contentType: "application/json",         dataType: "json",         data: JSON.stringify({             first_name: $("#namec").val(),             last_name: $("#surnamec").val(),             email: $("#emailc").val(),             mobile: $("#numberc").val(),             password: $("#passwordc").val()         }),         success: function(response) {             console.log(response);         },         error: function(response) {             console.log(response);         } }); 

Answer 2

I never had any luck with that approach. I always do this (hope this helps):

var obj = {};  obj.first_name = $("#namec").val(); obj.last_name = $("#surnamec").val(); obj.email = $("#emailc").val(); obj.mobile = $("#numberc").val(); obj.password = $("#passwordc").val(); 

Then in your ajax:

$.ajax({         type: "POST",         url: hb_base_url + "consumer",         contentType: "application/json",         dataType: "json",         data: JSON.stringify(obj),         success: function(response) {             console.log(response);         },         error: function(response) {             console.log(response);         }     });