Ich versuche, ein JSON-Objekt mit fetch zu POSTEN .
Soweit ich verstehen kann, muss ich dem Text der Anfrage ein stringifiziertes Objekt hinzufügen, z.
fetch("/echo/json/",
{
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
method: "POST",
body: JSON.stringify({a: 1, b: 2})
})
.then(function(res){ console.log(res) })
.catch(function(res){ console.log(res) })
Wenn Sie das json-Echo von jsfiddle verwenden, würde ich erwarten, dass das von mir gesendete Objekt ( {a: 1, b: 2}
) zurückgesendet wird, aber dies geschieht nicht - chrome devtools zeigt den JSON nicht einmal als Teil der Anforderung an, was bedeutet, dass es nicht gesendet wird.
javascript
json
fetch-api
Rasierer
quelle
quelle
{}
res.json()
sollte zurückkehren{a: 1, b: 2}
.json
Eigenschaft einzuschließen, die die Daten enthält, die Sie senden möchten. Allerdings wird dasbody
sowieso nicht richtig behandelt. Sehen Sie sich diese Geige an, um zu sehen, dass die Verzögerung von 5 Sekunden übersprungen wird. jsfiddle.net/99arsnkg Wenn Sie versuchen, zusätzliche Header hinzuzufügen, werden diese ignoriert. Dies ist wahrscheinlich ein Problem mit sichfetch()
selbst.Antworten:
Mit ES2017-
async/await
Unterstützung können SiePOST
eine JSON-Nutzlast folgendermaßen erstellen :Kann ES2017 nicht verwenden? Siehe @ vp_arts Antwort mit Versprechungen
Die Frage ist jedoch nach einem Problem, das durch einen längst behobenen Chrome-Fehler verursacht wurde.
Die ursprüngliche Antwort folgt.
Dies ist das eigentliche Problem hier und es ist ein Fehler mit Chrome Devtools , der in Chrome 46 behoben wurde.
Dieser Code funktioniert einwandfrei - er postet den JSON korrekt, er kann einfach nicht gesehen werden.
Das funktioniert nicht, weil dies nicht das richtige Format für das Echo von JSfiddle ist .
Der richtige Code lautet:
Für Endpunkte, die JSON-Nutzdaten akzeptieren, ist der ursprüngliche Code korrekt
quelle
x-www-form-urlencoded
) mit JSON-Daten in einem Feld mit dem Namenjson
. Die Daten werden also doppelt codiert. Für einen sauberen JSON-Beitrag siehe Antwort von @vp_arth unten.res.ok
falls der Antwortcode ein Fehler ist. Es wäre auch gut,.catch()
am Ende eine Klausel zu haben . Mir ist klar, dass dies nur ein Beispielausschnitt ist, aber denken Sie an diese Dinge für den realen Gebrauch.Ich denke , Ihr Problem ist ,
jsfiddle
kann Prozessform-urlencoded
Anfrage nur.Der richtige Weg, um eine JSON-Anfrage zu stellen, ist jedoch,
json
als Text korrekt zu übergeben:quelle
x-www-form-urlencoded
vs durcheinander zu seinapplication/json
, entweder weil sie nicht übereinstimmen oder JSON doppelt in eine URL-codierte Zeichenfolge einschließen./echo
Route zu erfüllen ?Von Suchmaschinen kam ich zu diesem Thema für Nicht-JSON-Posting-Daten mit Fetch, also dachte ich, ich würde dies hinzufügen.
Für Nicht-JSON müssen Sie keine Formulardaten verwenden. Sie können den
Content-Type
Header einfach auf setzenapplication/x-www-form-urlencoded
und eine Zeichenfolge verwenden:Eine alternative Möglichkeit, diese
body
Zeichenfolge zu erstellen , anstatt sie wie oben beschrieben einzugeben, besteht darin, Bibliotheken zu verwenden. Zum Beispiel diestringify
Funktion vonquery-string
oderqs
Pakete. Wenn Sie dies verwenden, würde es folgendermaßen aussehen:quelle
Nachdem Sie einige Zeit damit verbracht haben, jsFiddle zurückzuentwickeln und zu versuchen, Nutzdaten zu generieren, gibt es einen Effekt.
Bitte achten Sie online
return response.json();
darauf, dass eine Antwort keine Antwort ist - sie ist vielversprechend.jsFiddle: http://jsfiddle.net/egxt6cpz/46/ && Firefox> 39 && Chrome> 42
quelle
'x-www-form-urlencoded
stattdessenapplication/json
? Was ist der Unterschied?application/json
ist die richtige Form und es funktioniert jetzt. Danke für das gute Augefetch
( stackoverflow.com/questions/41984893/… ) statt demapplication/json
. Vielleicht wissen Sie warum ...Content-Type
istapplication/json
, aber Ihre tatsächlichebody
scheint zu seinx-www-form-urlencoded
- ich denke nicht, dass dies funktionieren sollte? Wenn es funktioniert, muss Ihr Server ziemlich verzeihend sein. Die Antwort von @vp_arth unten scheint die richtige zu sein.Ich habe einen dünnen Wrapper um fetch () mit vielen Verbesserungen erstellt, wenn Sie eine reine JSON-REST-API verwenden:
Um es zu verwenden, haben Sie die Variable
api
und 4 Methoden:Und innerhalb einer
async
Funktion:Beispiel mit jQuery:
quelle
Object.assign
? sollte sein,Object.assign({}, api.headers, headers)
weil Sie nicht immer benutzerdefinierteheaders
in Hash von Common hinzufügen möchtenapi.headers
. Recht?Dies hängt zusammen mit
Content-Type
. Wie Sie vielleicht aus anderen Diskussionen und Antworten auf diese Frage bemerkt haben, konnten einige Leute sie durch Einstellen lösenContent-Type: 'application/json'
. Leider hat es in meinem Fall nicht funktioniert, meine POST-Anfrage war auf der Serverseite noch leer.Wenn Sie es jedoch mit jQuery's versuchen
$.post()
und es funktioniert, liegt der Grund wahrscheinlich darin, dass jQueryContent-Type: 'x-www-form-urlencoded'
anstelle von verwendetapplication/json
.quelle
Hatte das gleiche Problem - nein
body
wurde von einem Client an einen Server gesendet.Das Hinzufügen eines
Content-Type
Headers hat es für mich gelöst:quelle
Die Top-Antwort funktioniert nicht für PHP7, weil es eine falsche Codierung hat, aber ich könnte die richtige Codierung mit den anderen Antworten herausfinden. Dieser Code sendet auch Authentifizierungscookies, die Sie wahrscheinlich benötigen, wenn Sie sich beispielsweise mit PHP-Foren befassen:
quelle
Es könnte für jemanden nützlich sein:
Ich hatte das Problem, dass Formulardaten nicht für meine Anfrage gesendet wurden
In meinem Fall war es eine Kombination der folgenden Header, die ebenfalls das Problem verursachten, und der falsche Inhaltstyp.
Also habe ich diese beiden Header mit der Anfrage gesendet und die Formulardaten wurden nicht gesendet, als ich die funktionierenden Header entfernt habe.
Auch wenn andere Antworten darauf hindeuten, dass der Content-Type-Header korrekt sein muss.
Für meine Anfrage war der richtige Content-Type-Header:
Wenn Ihre Formulardaten also nicht an die Anforderung angehängt werden, können dies möglicherweise Ihre Header sein. Versuchen Sie, Ihre Header auf ein Minimum zu reduzieren, und fügen Sie sie dann nacheinander hinzu, um festzustellen, ob Ihr Problem behoben ist.
quelle
Ich denke, wir müssen das JSON-Objekt nicht in eine Zeichenfolge analysieren. Wenn der Remote-Server json in die Anforderung akzeptiert, führen Sie einfach Folgendes aus:
Wie die Curl-Anfrage
Falls der Remote-Dienst keine JSON-Datei als Text akzeptiert, senden Sie einfach eine Datenform:
Wie die Curl-Anfrage
quelle
curl
tut Ihr Befehl implizit! Wenn Sie Ihre Objekte nicht kennzeichnen, bevor Sie sie als übergeben,body
senden Sie sie einfach"[object Object]"
als Hauptteil Ihrer Anfrage. Ein einfacher Test in Dev Tools würde Ihnen das zeigen. Öffnen Sie es und versuchen Sie es, ohne diesen Tab zu verlassen:a = new FormData(); a.append("foo","bar"); fetch("/foo/bar", { method: 'POST', body: {}, headers: { 'Content-type': 'application/json' } })
Wenn Ihre JSON-Nutzdaten Arrays und verschachtelte Objekte enthalten, würde ich
URLSearchParams
dieparam()
Methode von jQuery verwenden.Für Ihren Server sieht dies wie ein Standard-HTML aus
<form>
, dasPOST
bearbeitet wird.quelle