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

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

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

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

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

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

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

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

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

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

11 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Linked

Related