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 der Abruf-API zu veröffentlichen, und der gesendete Text lautet wie folgt:
-----------------------------114782935826962
Content-Disposition: form-data; name="email"
test@example.com
-----------------------------114782935826962
Content-Disposition: form-data; name="password"
pw
-----------------------------114782935826962--
(Ich weiß nicht, warum die Nummer in der Grenze jedes Mal geändert wird, wenn sie sendet ...)
Ich möchte, dass die Daten mit "Content-Type" gesendet werden: "application / x-www-form-urlencoded". Was soll ich tun? Oder wie dekodiere ich die Daten in meinem Controller, wenn ich mich nur darum kümmern muss?
Wem meine Frage beantwortet, ich weiß, dass ich es tun kann mit:
fetch("api/xxx", {
body: "[email protected]&password=pw",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
method: "post",
}
Was ich möchte, ist so etwas wie $ ("# form"). Serialize () in jQuery (ohne Verwendung von jQuery) oder die Art und Weise, Mulitpart- / Formulardaten im Controller zu dekodieren. Vielen Dank für Ihre Antworten.
javascript
ajax
fetch-api
Zack
quelle
quelle
FormData
?Antworten:
Um MDN
FormData
zu zitieren (Hervorhebung von mir):Wenn
FormData
Sie also verwenden, schließen Sie sich einmultipart/form-data
. Es gibt keine Möglichkeit, einFormData
Objekt als Hauptteil zu senden und keine Daten immultipart/form-data
Format zu senden .Wenn Sie die Daten so senden möchten, müssen
application/x-www-form-urlencoded
Sie entweder den Text als URL-codierte Zeichenfolge angeben oder einURLSearchParams
Objekt übergeben. Letzteres kann leider nicht direkt aus einemform
Element initialisiert werden . Wenn Sie Ihre Formularelemente nicht selbst durchlaufen möchten (was Sie auch tun könntenHTMLFormElement.elements
), können Sie auch einURLSearchParams
Objekt aus einemFormData
Objekt erstellen :Beachten Sie, dass Sie selbst keinen
Content-Type
Header angeben müssen .Wie von monk-time in den Kommentaren angegeben, können Sie
URLSearchParams
dasFormData
Objekt auch direkt erstellen und übergeben , anstatt die Werte in einer Schleife anzuhängen:Dies hat jedoch noch einige experimentelle Unterstützung in Browsern. Testen Sie dies daher ordnungsgemäß, bevor Sie es verwenden.
quelle
FormData
im Konstruktor direkt anstelle einer Schleife verwenden:new URLSearchParams(new FormData(formElement))
URLSearchParams
war sehr neu und war sehr begrenzt Unterstützung.fetch
es für Sie zu erledigen.URLSearchParams
ist in den meisten modernen Browsern als globales Objekt integriert und funktioniert auch über Node.Klient
Legen Sie den Inhaltstyp-Header nicht fest.
Server
Verwenden Sie das
FromForm
Attribut, um anzugeben, dass es sich bei der Bindungsquelle um Formulardaten handelt.quelle
application/x-www-form-urlencoded
es OP verlangt.Content-Type
aus dem Header entfernt habe und den Browser es automatisch machen ließ. Vielen Dank!multipart/form-data
es für Formulardaten sein sollte! Dann können Siemulter
in expressjs verwenden, um dieses Datenformat einfach zu analysieren.Sie können
body
eine Instanz festlegen , derenURLSearchParams
Abfragezeichenfolge als Argument übergeben wirdquelle
Reflect.apply(params.set, params, props)
ist eine besonders unlesbare Art zu sagenparams.set(props[0], props[1])
.Reflect.apply(params.set, params, props)
ist hier aus der Perspektive lesbar.Verwenden Sie
FormData
undfetch
, um Daten zu erfassen und zu sendenCode-Snippet anzeigen
quelle
quelle