Enviar datos JSON con jQuery

Question

¿Por qué el código siguiente envía datos como City=Moscow&Age=25 en lugar del formato JSON?

var arr = {City:'Moscow', Age:25}; 
$.ajax(
    { 
     url: "Ajax.ashx", 
     type: "POST", 
     data: arr, 
     dataType: 'json', 
     async: false, 
     success: function(msg) { 
      alert(msg); 
     } 
    } 
); 

Answer 1

Porque no ha especificado ni solicita el tipo de contenido, ni corrige la solicitud JSON. Esta es la forma correcta para enviar una solicitud JSON:

var arr = { City: 'Moscow', Age: 25 }; 
$.ajax({ 
    url: 'Ajax.ashx', 
    type: 'POST', 
    data: JSON.stringify(arr), 
    contentType: 'application/json; charset=utf-8', 
    dataType: 'json', 
    async: false, 
    success: function(msg) { 
     alert(msg); 
    } 
}); 

cosas a destacar:

• Uso del método JSON.stringify para convertir un objeto de javascript en una cadena JSON que es nativa y construido en los navegadores modernos . Si quieres apoyar a los navegadores antiguos puede que tenga que incluir json2.js
• Especificación del tipo de contenido de la petición mediante la propiedad contentType con el fin de indicar al servidor de la intención de enviar una solicitud JSON
• La propiedad dataType: 'json' se utiliza para la respuesta Escriba lo que espera del servidor. jQuery es lo suficientemente inteligente como adivinar desde el servidor Content-Type encabezado de respuesta. Entonces, si tiene un servidor web que respeta más o menos el protocolo HTTP y responde con Content-Type: application/json a su solicitud, jQuery automáticamente analizará la respuesta en un objeto javascript en la devolución de llamada success para que no necesite especificar la propiedad dataType.

Cosas que tener cuidado con:

• Lo que llamas arr es no una matriz. Es un objeto javascript con propiedades (City y Age). Las matrices se indican con [] en javascript. Por ejemplo, [{ City: 'Moscow', Age: 25 }, { City: 'Paris', Age: 30 }] es una matriz de 2 objetos.

Answer 2

porque por defecto jQuery serializa objetos pasados ​​como parámetro data a $.ajax. Utiliza $.param para convertir los datos a una cadena de consulta.

De la documentación de jQuery para $.ajax:

[el argumento data] se convierte en una cadena de consulta, si no está ya una cadena

Si desea enviar JSON, se le tienen que codificar por sí mismo:

data: JSON.stringify(arr); 

Tenga en cuenta que JSON.stringify sólo está presente en los navegadores modernos. Para soporte heredado, mira en json2.js

Answer 3

Se serializa para que el URI pueda leer los pares de valores de nombre en la solicitud POST de forma predeterminada. Podría intentar establecer processData: false en su lista de parámetros. No estoy seguro si eso ayudaría.

Answer 4

Debe establecer el tipo de contenido correcto y stringify su objeto.

var arr = {City:'Moscow', Age:25}; 
$.ajax(

      { 
       url: "Ajax.ashx", 
       type: "POST", 
       data: JSON.stringify(arr), 
       dataType: 'json', 
       async: false, 
       contentType: 'application/json; charset=utf-8', 
       success: function(msg) { 
        alert(msg); 
       } 
      } 
     ); 

Answer 5

Escribí una breve función de conveniencia para publicar JSON.

$.postJSON = function(url, data, success, args) { 
    args = $.extend({ 
    url: url, 
    type: 'POST', 
    data: JSON.stringify(data), 
    contentType: 'application/json; charset=utf-8', 
    dataType: 'json', 
    async: true, 
    success: success 
    }, args); 
    return $.ajax(args); 
}; 

$.postJSON('test/url', data, function(result) { 
    console.log('result', result); 
});