javascript - tutorial - vue fetch api




Wie poste ich Formulardaten mit Fetch API? (2)

Sie können body auf eine Instanz von URLSearchParams wobei die URLSearchParams als Argument übergeben wird

fetch("/path/to/server", {
  method:"POST"
, body:new URLSearchParams("[email protected]&password=pw")
})

document.forms[0].onsubmit = async(e) => {
  e.preventDefault();
  const params = new URLSearchParams([...new FormData(e.target).entries()]);
  // fetch("/path/to/server", {method:"POST", body:params})
  const response = await new Response(params).text();
  console.log(response);
}
<form>
  <input name="email" value="[email protected]">
  <input name="password" value="pw">
  <input type="submit">
</form>

Mein Code:

fetch("api/xxx", {
    body: new FormData(document.getElementById("form")),
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        // "Content-Type": "multipart/form-data",
    },
    method: "post",
}

Ich habe versucht, mein Formular mit fetch api zu veröffentlichen, und der Text, den es sendet, sieht folgendermaßen aus:

-----------------------------114782935826962
Content-Disposition: form-data; name="email"

[email protected].com
-----------------------------114782935826962
Content-Disposition: form-data; name="password"

pw
-----------------------------114782935826962--

(Ich weiß nicht, warum die Zahl in der Grenze jedes Mal geändert wird, wenn es sendet ...)

Ich möchte, dass die Daten mit "Content-Type": "application / x-www-form-urlencoded" gesendet werden. Was soll ich tun? Oder wie dekodiere ich die Daten in meinem Controller, wenn ich nur damit umgehen muss?

Ich weiß, mit wem ich meine Frage beantworten kann:

fetch("api/xxx", {
    body: "[email protected]&password=pw",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "post",
}

Was ich will, ist so etwas wie $ ("# form"). Serialize () in jQuery (ohne jQuery) oder die Möglichkeit, Multiteil- / Formulardaten im Controller zu dekodieren. Vielen Dank für Ihre Antworten.


So zitieren Sie MDN in FormData (Hervorhebung von mir):

Die FormData Schnittstelle bietet die Möglichkeit, auf einfache Weise einen Satz von Schlüssel / Wert-Paaren zu erstellen, die Formularfelder und deren Werte darstellen. FormData können dann einfach mit der XMLHttpRequest.send() -Methode gesendet werden. Es verwendet dasselbe Format, das ein Formular verwenden würde, wenn der Codierungstyp auf "multipart/form-data" .

FormData Sie FormData verwenden, FormData Sie sich also in multipart/form-data . Es gibt keine Möglichkeit, ein FormData Objekt als FormData zu senden und keine Daten im multipart/form-data zu senden.

Wenn Sie die Daten als application/x-www-form-urlencoded senden möchten, application/x-www-form-urlencoded Sie entweder den Body als URL-codierten String angeben oder ein URLSearchParams Objekt übergeben. Letzteres kann leider nicht direkt aus einem form initialisiert werden. Wenn Sie Ihre Formularelemente nicht selbst durchlaufen möchten (was Sie mit HTMLFormElement.elements tun HTMLFormElement.elements ), können Sie auch ein URLSearchParams Objekt aus einem FormData Objekt FormData :

const data = new URLSearchParams();
for (const pair of new FormData(formElement)) {
    data.append(pair[0], pair[1]);
}

fetch(url, {
    method: 'post',
    body: data,
})
.then(…);

Beachten Sie, dass Sie keinen Content-Type Header selbst angeben müssen.

Wie von monk-time in den Kommentaren erwähnt, können Sie auch URLSearchParams erstellen und das FormData Objekt direkt übergeben, anstatt die Werte in einer Schleife FormData :

const data = new URLSearchParams(new FormData(formElement));

In Browsern wird dies jedoch noch experimentell unterstützt. Testen Sie dies daher unbedingt, bevor Sie es verwenden.





fetch-api