Отправить данные 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);
}
});