Wie kann ich JQuery verwenden, um JSON-Daten zu veröffentlichen?

Ich möchte Json in einem Webdienst auf demselben Server veröffentlichen. Aber ich weiß nicht, wie ich Json mit JQuery posten soll. Ich habe es mit diesem Code versucht:

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

Mit diesem JQuery-Code werden die Daten jedoch nicht als Json auf dem Server empfangen. Dies sind die erwarteten Daten auf dem Server. {"name":"jonas"}Mit JQuery empfängt der Server jedoch name=jonas. Mit anderen Worten, es handelt sich um "urlencodierte" Daten und nicht um Json.

Gibt es eine Möglichkeit, die Daten im Json-Format anstelle von urlencodierten Daten mit JQuery zu veröffentlichen? Oder muss ich eine manuelle Ajax-Anfrage verwenden?

Sie übergeben ein Objekt, keine JSON-Zeichenfolge. Wenn Sie ein Objekt übergeben, $.paramserialisiert jQuery das Objekt in Name-Wert-Paare.

Wenn Sie die Daten als Zeichenfolge übergeben, werden sie nicht serialisiert:

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

Basierend auf der Antwort von Lonesomeday erstelle ich eine jpost, die bestimmte Parameter umschließt.

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

Verwendung:

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

Ich habe die Lösung von Ninh Pham ausprobiert, aber sie hat bei mir erst funktioniert, als ich sie optimiert habe - siehe unten. Entfernen Sie contentType und codieren Sie Ihre JSON-Daten nicht

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

Die Top-Antwort hat gut funktioniert, aber ich empfehle, Ihre JSON-Daten vor dem Posten in einer Variablen zu speichern. Dies ist etwas sauberer, wenn Sie ein langes Formular senden oder generell mit großen Datenmengen arbeiten.

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'
});

Verwenden Promiseund Überprüfen, ob das bodyObjekt ein gültiger JSON ist. Wenn nicht, wird ein Versprechen rejectzurückgegeben.

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
            });
    });
}