Мой код:
fetch("api/xxx", {
body: new FormData(document.getElementById("form")),
headers: {
"Content-Type": "application/x-www-form-urlencoded",
// "Content-Type": "multipart/form-data",
},
method: "post",
}
Я попытался опубликовать свою форму с помощью fetch api, и тело, которое он отправляет, выглядит так:
-----------------------------114782935826962
Content-Disposition: form-data; name="email"
test@example.com
-----------------------------114782935826962
Content-Disposition: form-data; name="password"
pw
-----------------------------114782935826962--
(Я не знаю, почему число в границе меняется каждый раз при отправке ...)
Я хочу, чтобы он отправлял данные с «Content-Type»: «application / x-www-form-urlencoded», что мне делать? Или, если мне просто нужно с этим справиться, как мне декодировать данные в моем контроллере?
Кому ответьте на мой вопрос, я знаю, что могу сделать это с помощью:
fetch("api/xxx", {
body: "email=test@example.com&password=pw",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
method: "post",
}
Я хочу что-то вроде $ ("# form"). Serialize () в jQuery (без использования jQuery) или способ декодирования mulitpart / form-data в контроллере. Спасибо за ответы.
FormData
?Ответы:
Процитирую MDN
FormData
(выделено мной):Поэтому при использовании
FormData
вы запираетесь вmultipart/form-data
. Невозможно отправитьFormData
объект как тело и не отправлять данные вmultipart/form-data
формате.Если вы хотите отправить данные,
application/x-www-form-urlencoded
вам нужно будет либо указать тело как строку в кодировке URL, либо передатьURLSearchParams
объект. К сожалению, последний не может быть инициализирован напрямую изform
элемента. Если вы не хотите самостоятельно перебирать элементы формы (что вы могли бы сделать с помощьюHTMLFormElement.elements
), вы также можете создатьURLSearchParams
объект изFormData
объекта:Обратите внимание, что вам не нужно указывать
Content-Type
заголовок самостоятельно.Как отметил monk-time в комментариях, вы также можете создать
URLSearchParams
и передатьFormData
объект напрямую, вместо добавления значений в цикл:Тем не менее, это все еще имеет экспериментальную поддержку в браузерах, поэтому обязательно проверьте это перед использованием.
источник
FormData
в конструкторе напрямую вместо цикла:new URLSearchParams(new FormData(formElement))
URLSearchParams
был очень новым и имел очень ограниченную поддержку.fetch
позаботиться об этом за вас.URLSearchParams
встроен в большинство современных браузеров как глобальный объект, а также работает из Node.Клиент
Не устанавливайте заголовок типа содержимого.
Сервер
Используйте
FromForm
атрибут, чтобы указать, что источником привязки являются данные формы.источник
application/x-www-form-urlencoded
которые запрашивает OP.Content-Type
из шапки и позволяю браузеру делать это автоматически. Спасибо!multipart/form-data
, что и должно быть для данных формы! Затем вы можете использоватьmulter
в expressjs для простого анализа этого формата данных.Вы можете установить
body
экземплярURLSearchParams
со строкой запроса, переданной в качестве аргументаисточник
Reflect.apply(params.set, params, props)
это особенно нечитаемый способ сказатьparams.set(props[0], props[1])
.Reflect.apply(params.set, params, props)
здесь читается с точки зрения перспективы.Используйте
FormData
и,fetch
чтобы получать и отправлять данныеПоказать фрагмент кода
источник
источник