Comment utiliser JQuery pour publier des données JSON?

Question

Je souhaite publier Json sur un service Web sur le même serveur. Mais je ne sais pas comment publier Json avec JQuery. J'ai essayé avec ce code:

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

Mais en utilisant ce code JQuery, les données ne sont pas reçues sous forme de Json sur le serveur. Voici les données attendues sur le serveur: {"name":"jonas"} mais en utilisant JQuery, le serveur reçoit name=jonas. Ou en d'autres termes, ce sont des données "urlencodées" et non Json.

Existe-t-il un moyen de publier les données au format Json au lieu de données codées en url avec JQuery? Ou dois-je utiliser une requête ajax manuelle?

Answer 1

Vous passez un objet, et non une chaîne JSON. Lorsque vous passez un objet, jQuery utilise $.param pour sérialiser l'objet en paires nom-valeur.

Si vous transmettez les données sous forme de chaîne, elles ne seront pas sérialisées:

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

Answer 2

Sur la base de la réponse de lonesomeday, je crée un jpost qui englobe certains paramètres.

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

Usage:

$.jpost('/form/', { name: 'Jonh' }).then(res => {
    console.log(res);
});