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?

Copy your JSON before sending it to the URL and paste it in jsonlint.com — Jimbo
– Jimbo, Commented Jul 2, 2013 at 12:58
What would you get if you put your json in a variable and use console.log() with that? — MisterBla
– MisterBla, Commented Jul 2, 2013 at 12:58
you could try to set the ajax call to a file you created yourself to see if the data you send is correct. — Vincent Cohen
– Vincent Cohen, Commented Jul 2, 2013 at 12:58
use Fiddler, It will help you record all the HTTP and HTTPS traffic that passes between your computer and the Internet. fiddler2.com/features — Rajeev Bera
– Rajeev Bera, Commented Jul 2, 2013 at 13:03

MrCode · Accepted Answer · 2013-07-02 12:58:42Z

62

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);
        }
});

answered Jul 2, 2013 at 12:58

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ram Over a year ago

So what is the identifier here?

MrCode Over a year ago

There is no identifier, the content type is application/json so the HTTP request body should be the raw JSON, with no identifier.

kshirish Over a year ago

I am so habitual to Angular and other frameworks that I forget, I need to stringify JSON data first. Frameworks have spoiled me. jQuery keeps you on ground.

user1477388 · Accepted Answer · 2013-07-02 12:58:50Z

14

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);
        }
    });

answered Jul 2, 2013 at 12:58

user1477388

21.6k35 gold badges152 silver badges277 bronze badges

Comments

Emil A. · Accepted Answer · 2013-07-02 12:59:40Z

5

Currently you are sending the data as typical POST values, which look like this:

first_name=somename&last_name=somesurname

If you want to send data as json you need to create an object with data and stringify it.

data: JSON.stringify(someobject)

answered Jul 2, 2013 at 12:59

Emil A.

3,4455 gold badges31 silver badges47 bronze badges

Comments

ermoshhkin · Accepted Answer · 2020-05-03 18:41:58Z

$.ajax({
   type: "POST",
   url: hb_base_url + "consumer",
   contentType: "application/json",
   dataType: "json",
   data: {
       data__value = 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);
   }
});

(RU) На сервере ваши данные можно получить как - $_POST['data__value']; Например для получения значения first_name на сервере, нужно написать:

(EN) On the server, you can get your data as - $_POST ['data__value']; For example, to get the first_name value on the server, write:

$test = json_decode( $_POST['data__value'] );
echo $test->first_name;

Syscall · Accepted Answer · 2021-04-03 16:06:17Z

0

You need to parse the string. You are sending from JavaScript object to the JSON object

var json = $.parseJSON(data);

edited Apr 3, 2021 at 16:06

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

answered Jan 12, 2021 at 19:44

Zaid Reshamwale

611 bronze badge

Collectives™ on Stack Overflow

jQuery AJAX and JSON format

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related