Cómo enviar JSON en lugar de una cadena de consulta con $.ajax?

¿Puede alguien explicar de una manera fácil cómo hacer que jQuery envíe JSON real en lugar de una cadena de consulta?

$.ajax({
    url      : url,
    dataType : 'json', // I was pretty sure this would do the trick
    data     : data,
    type     : 'POST',
    complete : callback // etc
});

Esto de hecho convertirá su JSON cuidadosamente preparado en una cadena de consulta. Una de las cosas molestas es que cualquier array: [] en su objeto se convertirá a array[]: [], probablemente debido a las limitaciones de la consulta sting.

Author: Xufox, 2012-10-02
Source

4 answers

Necesita usar JSON.stringify para serializar primero su objeto a JSON, y luego especificar el contentType para que su servidor entienda que es JSON. Esto debería hacer el truco:

$.ajax({
    url: url,
    type: "POST",
    data: JSON.stringify(data),
    contentType: "application/json",
    complete: callback
});

Tenga en cuenta que el objeto JSON está disponible de forma nativa en navegadores que admiten JavaScript 1.7 / ECMAScript 5 o posterior. Si necesita soporte heredado, puede usar json2.

Estos detalles adicionales se incluyeron originalmente incorrectamente en una revisión anterior de la pregunta. Han sido copiados en esta respuesta aceptada.

Tenga en cuenta que esto requiere CORS encabezados adecuados del lado del servidor, y contrariamente a algunos ejemplos en la red, Allow-Headers no puede usar comodines (mientras que Allow-Origin puede).

{
    Content-Type                 : 'application/json', 
    Access-Control-Allow-Origin  : '*', 
    Access-Control-Allow-Headers : 'Content-Type' // You cannot use '*'
}

También, tenga en cuenta que jQuery ahora enviará dos solicitudes, una para completar el apretón de manos y otra con el contenido real. Este es un comportamiento HTTP normal llamado pre-vuelo. La primera solicitud será un OPTIONS encabezado para determinar si el servidor es realmente compatible con la solicitud planificada.

Así que tenga en cuenta si desea que su servidor sea versátil, usando una cadena de consulta envía solo una solicitud. Usando true JSON envía al menos dos solicitudes, una para el apretón de manos.

 227
Author: mekwall,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-29 07:01:02

No, el dataType la opción es para analizar los datos recibidos.

Para publicar JSON, deberá stringificarlo usted mismo a través de JSON.stringify y establezca la opción processData en false.

$.ajax({
    url: url,
    type: "POST",
    data: JSON.stringify(data),
    processData: false,
    contentType: "application/json; charset=UTF-8",
    complete: callback
});

Tenga en cuenta que no todos los navegadores admiten el objeto JSON, y aunque jQuery tiene .parseJSON, no incluye stringifier; necesitará otra biblioteca polyfill.

 26
Author: Bergi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-31 05:38:16

Mientras conozco muchas arquitecturas como ASP.NET MVC tiene funcionalidad incorporada para manejar JSON.stringify como el ContentType mi situación es un poco diferente, así que tal vez esto pueda ayudar a alguien en el futuro. Sé que me habría ahorrado horas!

Dado que mis solicitudes http están siendo manejadas por una API CGI de IBM (entorno AS400) en un subdominio diferente, estas solicitudes son de origen cruzado, de ahí el jsonp. En realidad envío mi ajax a través de objetos javascript. Aquí hay un ejemplo de mi ajax MENSAJE: 

 var data = {USER : localProfile,  
        INSTANCE : "HTHACKNEY",  
        PAGE : $('select[name="PAGE"]').val(), 
        TITLE : $("input[name='TITLE']").val(), 
        HTML : html,
        STARTDATE : $("input[name='STARTDATE']").val(), 
        ENDDATE : $("input[name='ENDDATE']").val(),
        ARCHIVE : $("input[name='ARCHIVE']").val(), 
        ACTIVE : $("input[name='ACTIVE']").val(), 
        URGENT : $("input[name='URGENT']").val(), 
        AUTHLST :  authStr};
        //console.log(data);
       $.ajax({
            type: "POST",
           url:   "http://www.domian.com/webservicepgm?callback=?",
           data:  data,
           dataType:'jsonp'
       }).
       done(function(data){
         //handle data.WHATEVER
       });
 5
Author: yardpenalty,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-03 16:22:54

Si está enviando esto de vuelta a asp.net y necesita los datos en la petición.form [] luego deberá establecer el tipo de contenido en "application / x-www-form-urlencoded; charset=utf-8"

Post original aquí

En segundo lugar, deshazte del Tipo de datos, si no esperas una devolución, el POST esperará unos 4 minutos antes de fallar. Ver aquí

 1
Author: Tod,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:26:42