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

¿Alguien puede 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
});

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

Debe usarlo JSON.stringifypara serializar primero su objeto en JSON y luego especificarlo contentTypepara que su servidor comprenda que es JSON. Esto debería funcionar:

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

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

No, la dataTypeopción es analizar los datos recibidos.

Para publicar JSON, tendrá que encadenarlo usted mismo a través de JSON.stringifyy configurar la processDataopción 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 son compatibles con el JSONobjeto, y aunque jQuery sí lo tiene .parseJSON, no tiene un stringifier incluido; Necesitarás otra biblioteca de polyfill.

Si bien sé que muchas arquitecturas como ASP.NET MVC tienen una funcionalidad incorporada para manejar JSON.stringify como contentType, mi situación es un poco diferente, por lo 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. De hecho, envío mi ajax a través de objetos de JavaScript. Aquí hay un ejemplo de mi ajax POST:

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

Si envía esto de vuelta a asp.net y necesita los datos en request.form [], deberá configurar el tipo de contenido en "application / x-www-form-urlencoded; charset = utf-8"

Publicación original aquí

En segundo lugar, elimine el Datatype, si no espera una devolución, la POST esperará unos 4 minutos antes de fallar. Ver aquí