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

73

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?

Jonas
quelle

Antworten:

145

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'
});
einsamer Tag
quelle
3
Bitte verwenden Sie dafür $ .post anstelle von $ .ajax.
user3746259
17
@ user3746259 Warum solltest du das verwenden $.post? Es ist (a) nur ein Wrapper für $.ajaxund (b) nicht in der Lage, das zu tun, was hier erforderlich ist (dh die contentTypeEigenschaft).
einsamer
5
Bis jQuery 3, das heißt, was jetzt noch in der Zukunft liegt, ist es egal, wann diese Antwort vor über vier Jahren geschrieben wurde .
einsamer
@lonesomeday Danke. Ich hatte das gleiche Problem und nachdem ich das Objekt in einen String konvertiert hatte, funktionierte es.
Dame Lyngdoh
@lonesomeday Ich musste Ihren Ansatz sogar in 3.2 verwenden, um contentType zu json zu zwingen. Achselzucken
Lo-Tan
10

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);
});
Ninh Pham
quelle
-1

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'
        });
Lee Harding
quelle
1
Dies wird keine JSON-Anfrage Körper
Phil
-2

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

David Arun
quelle
2
Sie haben vergessen, die Daten zu stringifizieren
Phil
-3

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