Nicht-String-Objekte mit Fetch senden

Question

Ich verwende die fetch -api zum ersten Mal und Probleme beim Übergeben eines nicht-stringed JSON Objekte an den Server. Grundsätzlich mag ich das gleiche Verhalten wie das erreichen:

$.post(url, {"test": "test"}, function(response) { 
    console.log(response); 
}); 

Die Abrufverfahren mit einem Web-API kommunizieren die unaccessable für mich und erwarte ein ebenes JSON Objekt.

Normalerweise würde ich nur FormData verwenden, um Daten an den Server übergeben, aber die JSON wird in einen String umgewandelt werden [Object object]: scheint

fetch(url, { 
    method: 'POST', 
    body: {"test": "test"} 
}) 
    .then(data => data.json()) 
    .then(json => console.log(json)) 
    .catch(e => console.error(e)); 

Der Körper Anfrage leer zu sein, wenn $_POST mit (was, was ist es, die API verwendet), bietet jedoch den richtigen Wert bei der Verwendung von file_get_contents('php://input).

Ich hatte zwar etwas mit der falschen header zu der Anfrage gegeben. Also habe ich versucht, den Header Ajax Beitrag verwendet: content-type:multipart/form-data;. Das hat aber auch keinen Wert bekommen.

Ich fragte mich, ob dies ausdrücklich Absicht war, nicht einfach JSON Objekt als Daten zu geben, oder dass ich einfach etwas fehlt?

---

Dies funktioniert, ist aber nicht erlaubt, da es eine stringify Version des JSON Objekt ist:

var formData = new FormData(); 
formData.append('data', JSON.stringify(data)); 

fetch(url, { 
    method: 'POST', 
    body: formData 
}) 
    .then(data => data.json()) 
    .then(json => console.log(json)) 
    .catch(e => console.error(e)); 

Answer 1

Also zuerst muss ich auf das POST-Protokoll, das von $_POST verwendet wird. Ich tue dies durch einen Header von application/x-www-form-urlencoded Zugabe (die das Protokoll von $_POST verwendet wird, ist, wie in der docs beschrieben) zum Abruf Post-Anforderung:

fetch(url, { 
    headers: new Headers({'Content-Type': 'application/x-www-form-urlencoded'}), // Default header which $_POST listens to 
    ... 

Nun ist der Weg $.post tatsächlich sendet die Daten durch eine serialisierte Zeichenfolge Erstellen (zB: a%5Bone%5D=1) des gegebenen Objekts.Um ein Objekt zu einem serialisierten String zu umwandeln, können Sie $.param verwenden:

fetch(url, { 
      headers: new Headers({'Content-Type': 'application/x-www-form-urlencoded'}), // Default header which $_POST listens to 
      method: 'POST', 
      body: $.param(data) 
     }) 

Dies können Sie machen, um Daten von $_POST retreive wie Sie mit einer einfachen $.post tun würden.

Answer 2

Lassen Sie uns sagen, dass Ihre Daten in einer Variablen var data = { a: "some data", b: 123 } ist. Wenn Sie Ihren Code in PHP diese Felder auf diese Weise zuzugreifen:

$_POST["a"] == "some data"; 
$_POST["b"] == 123; 

Dann müssen Sie die Daten im formData Format auf diese Weise senden:

var fdata = new FormData(); 
fdata.append('a', 'some data'); 
fdata.append('b', '123'); 

Jetzt können Sie diese Daten senden und PHP wird Zugriff auf die getrennten Felder a und b haben, aber beachten Sie b wird eine Zeichenfolge, keine Nummer sein.

Was ist, wenn Sie ein Array senden möchten. Sagen wir { c: ['hello', 'world', '!'] }? Sie müssen PHP-Namenskonventionen folgen und die gleichen Namen mehrmals hinzufügen:

var fdata = new FormData(); 
fdata.append('c[]', 'hello'); 
fdata.append('c[]', 'world'); 
fdata.append('c[]', '!'); 

Nachdem die Formulardaten Instanz einstellen, können Sie es als den Körper des Antrags verwenden können.