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

Я хочу отправить 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. Или, другими словами, это "urlencoded" данные, а не Json.

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

Ответ 1

Вы передаете объект, а не строку 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'
});

Ответ 2

Основание на ответе lonesomeday, я создаю 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);
});

Ответ 3

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

var Data = {
"name":"jonsa",
"e-mail":"[email protected]",
"phone":1223456789
};


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

Ответ 4

Я попробовал решение Ninh Pham, но это не сработало для меня, пока я не изменил его - см. Ниже. Удалить contentType и не кодировать данные json

$.fn.postJSON = function(url, data) {
    return $.ajax({
            type: 'POST',
            url: url,
            data: data,
            dataType: 'json'
        });

Ответ 5

Используя 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
            });
    });
}