Отправить данные JSON с помощью jQuery

Почему код ниже отправляется как City=Moscow&Age=25 вместо формата JSON?

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

Ответ 1

Потому что вы не указали ни тип содержимого запроса, ни правильный запрос JSON. Здесь правильный способ отправить запрос 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);
    }
});

Замечания:

Использование метода JSON.stringify для преобразования объекта javascript в строку JSON, которая является родной и встроенной в современные браузеры. Если вы хотите поддерживать старые браузеры, вам может потребоваться включить json2.js
Указание типа содержимого запроса с использованием свойства contentType, чтобы указать серверу цель отправки запроса JSON
Свойство dataType: 'json' используется для типа ответа, который вы ожидаете от сервера. jQuery достаточно умен, чтобы угадать его с заголовка ответа сервера Content-Type. Поэтому, если у вас есть веб-сервер, который более или менее поддерживает протокол HTTP и отвечает на ваш запрос, Content-Type: application/json jQuery будет автоматически анализировать ответ в javascript-объекте в обратном вызове success, так что вам не нужно указывать dataType.

Осторожно:

То, что вы называете arr, не является массивом. Это объект javascript со свойствами (City и Age). Массивы обозначаются символом [] в javascript. Например, [{ City: 'Moscow', Age: 25 }, { City: 'Paris', Age: 30 }] представляет собой массив из двух объектов.

Ответ 2

Поскольку по умолчанию jQuery сериализует объекты, переданные как параметр data, на $.ajax. Он использует $.param для преобразования данных в строку запроса.

Из документов jQuery для $.ajax:

[аргумент data] преобразуется в строку запроса, если уже не строка

Если вы хотите отправить JSON, вам придется его кодировать самостоятельно:

data: JSON.stringify(arr);

Обратите внимание, что JSON.stringify присутствует только в современных браузерах. Для старой поддержки загляните в json2.js

Ответ 3

Я написал короткую удобную функцию для размещения 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);
});

Ответ 4

Он сериализуется так, что URI может по умолчанию считывать пары значений имени в запросе POST. Вы можете попробовать установить processData: false в свой список параметров. Не уверен, что это поможет.

Ответ 5

Вам необходимо установить правильный тип контента и подстроить его.

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