Wie kann ich mit JQuery JSON-Daten posten?

Ich möchte Json zu einem Webdienst auf demselben Server veröffentlichen. Aber ich weiß nicht, wie man Json mit JQuery posten kann. 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"} aber unter Verwendung von JQuery erhält der Server name=jonas . Oder mit anderen Worten, es sind “urlencodierte” Daten und nicht 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 und keine JSON-Zeichenfolge. Wenn Sie ein Objekt übergeben, verwendet jQuery $.param um das Objekt in Name-Wert-Paare zu serialisieren.

Wenn Sie die Daten als Zeichenfolge übergeben, wird 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' }); 

jpost auf der Antwort von lonesomeday erstelle ich einen jpost , der bestimmte Parameter jpost .

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

Die beste Antwort funktionierte gut, aber ich schlage vor, dass Sie Ihre JSON-Daten in einer Variablen speichern, bevor Sie etwas sauberer versenden, wenn Sie ein langes Formular senden oder allgemein mit großen Daten umgehen.

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

Ich habe versucht Ninh Phams Lösung, aber es hat nicht funktioniert, bis ich es 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' }); 

Verwenden von Promise und Überprüfen, ob das body ein gültiger JSON ist. Wenn nicht, wird eine 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 }); }); }