Как я могу использовать JQuery для публикации данных JSON? - PullRequest
Новая
       3

Как я могу использовать JQuery для публикации данных JSON?

66 голосов
/ 06 июня 2011

Я хотел бы опубликовать Json в веб-сервисе на том же сервере. Но я не знаю, как публиковать Json, используя JQuery. Я пытался с этим кодом: 

$.ajax({
    type: 'POST',
    url: '/form/',
    data: {"name":"jonas"},
    success: function(data) { alert('data: ' + data); },
    contentType: "application/json",
    dataType: 'json'
});

Но при использовании этого кода JQuery данные не принимаются как Json на сервере. Это ожидаемые данные на сервере: {"name":"jonas"}, но с использованием JQuery сервер получает name=jonas. Или, другими словами, это «урленкодированные» данные, а не Json.

Есть ли способ опубликовать данные в формате Json вместо урлен-кодированных данных с помощью JQuery? Или я должен использовать ручной запрос ajax?

Ответы [ 5 ]

129 голосов
/ 06 июня 2011

Вы передаете объект, не строка JSON.Когда вы передаете объект, jQuery использует $.param для сериализации объекта в пары имя-значение.

Если вы передаете данные в виде строки, они не будут сериализованы: 

$.ajax({
    type: 'POST',
    url: '/form/',
    data: '{"name":"jonas"}', // or JSON.stringify ({name: 'jonas'}),
    success: function(data) { alert('data: ' + data); },
    contentType: "application/json",
    dataType: 'json'
});
8 голосов
/ 20 декабря 2016

Основываясь на ответе одиночного дня, я создаю jpost, который оборачивает определенные параметры. 

$.extend({
    jpost: function(url, body) {
        return $.ajax({
            type: 'POST',
            url: url,
            data: JSON.stringify(body),
            contentType: "application/json",
            dataType: 'json'
        });
    }
});

Использование: 

$.jpost('/form/', { name: 'Jonh' }).then(res => {
    console.log(res);
});
0 голосов
/ 22 июня 2018

Я попробовал решение Нин Фама, но оно не работало для меня, пока я не настроил его - см. Ниже. Удалите contentType и не кодируйте свои данные json 

$.fn.postJSON = function(url, data) {
    return $.ajax({
            type: 'POST',
            url: url,
            data: data,
            dataType: 'json'
        });
0 голосов
/ 18 июня 2018

Верхний ответ работал нормально, но я предлагаю сохранить ваши данные JSON в переменную, прежде чем публиковать их, будет немного чище при отправке длинной формы или работе с большими данными в целом. 

var Data = {
"name":"jonsa",
"e-mail":"qwerty@gmail.com",
"phone":1223456789
};


$.ajax({
    type: 'POST',
    url: '/form/',
    data: Data,
    success: function(data) { alert('data: ' + data); },
    contentType: "application/json",
    dataType: 'json'
});
0 голосов
/ 21 февраля 2017

Использование Promise и проверка, является ли объект body допустимым JSON.Если не обещание, будет возвращено reject. 

var DoPost = function(url, body) {
    try {
        body = JSON.stringify(body);
    } catch (error) {
        return reject(error);
    }
    return new Promise((resolve, reject) => {
        $.ajax({
                type: 'POST',
                url: url,
                data: body,
                contentType: "application/json",
                dataType: 'json'
            })
            .done(function(data) {
                return resolve(data);
            })
            .fail(function(error) {
                console.error(error);
                return reject(error);
            })
            .always(function() {
                // called after done or fail
            });
    });
}
...