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

Question

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

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

Pero el uso de este código jQuery que los datos no se recibe 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 utilizando JQuery? ¿O debo usar una solicitud manual ajax?

Answer 1

Está 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 va a ser serializado:

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

Answer 2

Base en la respuesta de lonesomeday, 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); 
}); 

Answer 3

Usando Promise y comprobar si el objeto es un body JSON válida. Si no, se devolverá una Promesa reject.

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