Блог

Главная - Вопросы по программированию - Как я могу использовать jQuery для публикации данных JSON?

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

#javascript #ajax #greasemonkey

#jquery #json #ajax #http-post

Вопрос:

Я хотел бы опубликовать 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'
});

Комментарии:

1. Пожалуйста, используйте для этого $.post вместо $ .ajax.

2. @user3746259 Почему вы хотите использовать $.post для этого? Это (а) только оболочка для $.ajax и (б) не может сделать то, что требуется здесь (т. Е. contentType Свойство).

3. До тех пор, пока, как вы знаете, не появится jQuery 3, который все еще находится в будущем , неважно, когда этот ответ был написан более четырех лет назад .

4. @lonesomeday Спасибо. У меня была та же проблема, и после преобразования объекта в строку это сработало.

5. @lonesomeday мне пришлось использовать ваш подход даже в 3.2, чтобы принудительно преобразовать ContentType в json. пожать плечами

Ответ №2:

Основываясь на ответе lonesomeday, я создаю a 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:

вы можете отправлять данные с помощью ajax как :

  $.ajax({
   url: "url", 
   type: "POST",
   dataType: "json",
   contentType: "application/json; charset=utf-8",
   data: JSON.stringify({ name: 'value1', email: 'value2' }),
   success: function (result) {
       // when call is sucessfull
    },
    error: function (err) {
    // check the err for error details
    }
 }); // ajax call closing

Ответ №4:

Я попробовал решение Ninh Pham, но оно не работало для меня, пока я не изменил его — см. Ниже. Удалите ContentType и не кодируйте свои данные в формате json

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

Комментарии:

1. Это не приведет к публикации тела запроса JSON

Ответ №5:

Верхний ответ работал нормально, но я предлагаю сохранить ваши данные 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'
});

Комментарии:

1. Вы забыли упорядочить данные

Ответ №6:

Использование 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
            });
    });
}