Mon 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",
}
J'ai essayé de publier mon formulaire en utilisant fetch api, et le corps qu'il envoie est comme:
-----------------------------114782935826962
Content-Disposition: form-data; name="email"
test@example.com
-----------------------------114782935826962
Content-Disposition: form-data; name="password"
pw
-----------------------------114782935826962--
(Je ne sais pas pourquoi le nombre dans la limite est changé à chaque fois qu'il envoie ...)
Je voudrais qu'il envoie les données avec "Content-Type": "application / x-www-form-urlencoded", que dois-je faire? Ou si je dois simplement m'en occuper, comment décoder les données de mon contrôleur?
À qui répondre à ma question, je sais que je peux le faire avec:
fetch("api/xxx", {
body: "[email protected]&password=pw",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
method: "post",
}
Ce que je veux, c'est quelque chose comme $ ("# form"). Serialize () dans jQuery (sans utiliser jQuery) ou la façon de décoder mulitpart / form-data dans le contrôleur. Merci pour vos réponses.
javascript
ajax
fetch-api
Zack
la source
la source
FormData
?Réponses:
Pour citer MDN sur
FormData
(c'est moi qui souligne):Ainsi, lors de l'utilisation,
FormData
vous vous enfermez dansmultipart/form-data
. Il n'y a aucun moyen d'envoyer unFormData
objet en tant que corps et de ne pas envoyer de données aumultipart/form-data
format.Si vous souhaitez envoyer les données en tant
application/x-www-form-urlencoded
que telles, vous devrez soit spécifier le corps sous forme de chaîne encodée en URL, soit transmettre unURLSearchParams
objet. Ce dernier ne peut malheureusement pas être directement initialisé à partir d'unform
élément. Si vous ne souhaitez pas parcourir vous-même les éléments de votre formulaire (ce que vous pouvez faire en utilisantHTMLFormElement.elements
), vous pouvez également créer unURLSearchParams
objet à partir d'unFormData
objet:Notez que vous n'avez pas besoin de spécifier
Content-Type
vous-même un en-tête.Comme indiqué par monk-time dans les commentaires, vous pouvez également créer
URLSearchParams
et transmettre l'FormData
objet directement, au lieu d'ajouter les valeurs dans une boucle:Cependant, cela a encore un support expérimental dans les navigateurs, alors assurez-vous de le tester correctement avant de l'utiliser.
la source
FormData
dans le constructeur directement au lieu d'une boucle:new URLSearchParams(new FormData(formElement))
URLSearchParams
était très nouveau et avait un support très limité.fetch
occuper pour vous.URLSearchParams
est intégré à la plupart des navigateurs modernes en tant qu'objet global et fonctionne également à partir de Node.Client
Ne définissez pas l'en-tête de type de contenu.
Serveur
Utilisez l'
FromForm
attribut pour spécifier que la source de liaison est des données de formulaire.la source
application/x-www-form-urlencoded
ce que OP demande.Content-Type
de l'en-tête et laissé le navigateur le faire automatiquement. Merci!multipart/form-data
, ce qui devrait être pour les données de formulaire! Ensuite, vous pouvez utilisermulter
dans expressjs pour analyser facilement ce format de données.Vous pouvez définir
body
une instance deURLSearchParams
avec une chaîne de requête passée en argumentla source
Reflect.apply(params.set, params, props)
est une façon particulièrement illisible de direparams.set(props[0], props[1])
.Reflect.apply(params.set, params, props)
est lisible de la perspective ici.Utilisez
FormData
etfetch
pour saisir et envoyer des donnéesAfficher l'extrait de code
la source
la source