How can I use JQuery to post JSON data?

Question

I would like to post Json to a web service on the same server. But I don't know how to post Json using JQuery. I have tried with this code:

$.ajax({
    type: 'POST',
    url: '/form/',
    data: {"name":"jonas"},
    success: function(data) { alert('data: ' + data); },
    contentType: "application/json",
    dataType: 'json'
});

But using this JQuery code the data is not received as Json on the server. This is the expected data at the server: {"name":"jonas"} but using JQuery the server receive name=jonas. Or in other words, it's "urlencoded" data and not Json.

Is there any way to post the data in Json format instead of urlencoded data using JQuery? Or do I have to use a manual ajax request?

lonesomeday · Accepted Answer · 2011-06-06 16:54:30Z

170

You're passing an object, not a JSON string. When you pass an object, jQuery uses $.param to serialize the object into name-value pairs.

If you pass the data as a string, it won't be serialized:

$.ajax({
    type: 'POST',
    url: '/form/',
    data: '{"name":"jonas"}', // or JSON.stringify ({name: 'jonas'}),
    success: function(data) { alert('data: ' + data); },
    contentType: "application/json",
    dataType: 'json'
});

answered Jun 6, 2011 at 16:54

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

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

11 Comments

user3746259 Over a year ago

Please use $.post for that instead of $.ajax.

lonesomeday Over a year ago

@user3746259 Why would you want to use $.post for that? It is (a) only a wrapper for $.ajax and (b) unable to do what is required here (i.e. the contentType property).

lonesomeday Over a year ago

Until, you know, jQuery 3, that is, which is still in the future now, never mind when this answer was written over four years ago.

Dame Lyngdoh Over a year ago

@lonesomeday Thanks. I had the same problem and after converting the object to string, it worked.

Lo-Tan Over a year ago

@lonesomeday i had to use your approach even in 3.2 to force contentType to json. shrug

|

ninhjs.dev · Accepted Answer · 2016-12-20 14:00:38Z

13

Base on lonesomeday's answer, I create a jpost that wraps certain parameters.

$.extend({
    jpost: function(url, body) {
        return $.ajax({
            type: 'POST',
            url: url,
            data: JSON.stringify(body),
            contentType: "application/json",
            dataType: 'json'
        });
    }
});

Usage:

$.jpost('/form/', { name: 'Jonh' }).then(res => {
    console.log(res);
});

answered Dec 20, 2016 at 14:00

ninhjs.dev

8,7732 gold badges53 silver badges40 bronze badges

Comments

Er Mayank · Accepted Answer · 2021-05-12 10:17:47Z

1

you can post data using ajax as :

 $.ajax({
   url: "url", 
   type: "POST",
   dataType: "json",
   contentType: "application/json; charset=utf-8",
   data: JSON.stringify({ name: 'value1', email: 'value2' }),
   success: function (result) {
       // when call is sucessfull
    },
    error: function (err) {
    // check the err for error details
    }
 }); // ajax call closing

answered May 12, 2021 at 10:17

Er Mayank

1,0732 gold badges19 silver badges40 bronze badges

Comments

Lee Harding · Accepted Answer · 2018-06-22 10:07:04Z

-1

I tried Ninh Pham's solution but it didn't work for me until I tweaked it - see below. Remove contentType and don't encode your json data

$.fn.postJSON = function(url, data) {
    return $.ajax({
            type: 'POST',
            url: url,
            data: data,
            dataType: 'json'
        });

answered Jun 22, 2018 at 10:07

Lee Harding

171 silver badge4 bronze badges

1 Comment

Phil Over a year ago

This will not post a JSON request body

loretoparisi · Accepted Answer · 2017-02-21 08:41:03Z

Using Promise and checking if the body object is a valid JSON. If not a Promise reject will be returned.

var DoPost = function(url, body) {
    try {
        body = JSON.stringify(body);
    } catch (error) {
        return reject(error);
    }
    return new Promise((resolve, reject) => {
        $.ajax({
                type: 'POST',
                url: url,
                data: body,
                contentType: "application/json",
                dataType: 'json'
            })
            .done(function(data) {
                return resolve(data);
            })
            .fail(function(error) {
                console.error(error);
                return reject(error);
            })
            .always(function() {
                // called after done or fail
            });
    });
}

David Arun · Accepted Answer · 2018-06-17 23:36:58Z

-2

The top answer worked fine but I suggest saving your JSON data into a variable before posting it is a little bit cleaner when sending a long form or dealing with large data in general.

var Data = {
"name":"jonsa",
"e-mail":"[email protected]",
"phone":1223456789
};


$.ajax({
    type: 'POST',
    url: '/form/',
    data: Data,
    success: function(data) { alert('data: ' + data); },
    contentType: "application/json",
    dataType: 'json'
});

answered Jun 17, 2018 at 23:36

David Arun

451 silver badge9 bronze badges

1 Comment

Phil Over a year ago

You have forgotten to stringify the data

Collectives™ on Stack Overflow

How can I use JQuery to post JSON data?

6 Answers 6

11 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

11 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related