Блог

Я хотел бы опубликовать 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 вместо данных, закодированных в URL, с помощью jQuery? Или я должен использовать ajax-запрос вручную?

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

Основываясь на ответе 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);
});
  

вы можете отправлять данные с помощью 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
  

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

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

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

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