¿Cómo puedo usar JQuery para publicar datos JSON?

Me gustaría publicar Json en un servicio web en el mismo servidor. Pero no sé cómo publicar Json utilizando JQuery. Lo he intentado con este código:

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

Pero al usar este código JQuery, los datos no se reciben como Json en el servidor. Estos son los datos esperados en el servidor: {"name":"jonas"} pero con JQuery el servidor recibe name=jonas . O en otras palabras, se trata de datos “urlencoded” y no de Json.

¿Hay alguna manera de publicar los datos en formato Json en lugar de datos urlencoded usando JQuery? ¿O debo usar una solicitud manual ajax?

Estás pasando un objeto, no una cadena JSON. Cuando pasa un objeto, jQuery usa $.param para serializar el objeto en pares nombre-valor.

Si pasa los datos como una cadena, no se serializará:

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

Basado en la respuesta de jpost , creo un jpost que envuelve ciertos parámetros.

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

Uso:

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

La respuesta principal funcionó bien, pero sugiero que guardes tus datos JSON en una variable antes de publicarlos; es un poco más claro cuando envías un formulario largo o manejas datos grandes en general.

 var Data = { "name":"jonsa", "e-mail":"qwerty@gmail.com", "phone":1223456789 }; $.ajax({ type: 'POST', url: '/form/', data: Data, success: function(data) { alert('data: ' + data); }, contentType: "application/json", dataType: 'json' }); 

Probé la solución de Ninh Pham, pero no funcionó para mí hasta que la modifiqué (ver más abajo). Elimina contentType y no codifica tus datos json

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

Usando Promise y comprobando si el body objeto es un JSON válido. Si no, se devolverá un reject Promise.

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