Данные формы и полезная нагрузка запроса, вы действительно понимаете?

Ajax

предисловие

Сегодня в полдень, после получения ланч-бокса, когда я ел, чтобы успеть за расписанием, мне пришлось набирать код во время еды.Чтобы отправить картинку на бэкенд, я использовалnew FormData()положить фотографииappendвойти, симулироватьformForm submit, паника, торопился, думаю, что можно весело покушать, бэкенд сказал, что данных нет... Данные я явно передаю на бэкенд, почему у холостяков конфидент? Давайте войдем в нашу тему на этот раз

Введение

чтоForm Data? чтоRequestPayload?FormDataа такжеPayloadдабраузерпередатьинтерфейсдва формата, два путибраузерчерезContent-Typeзначение, чтобы различать:

  1. еслиapplication/x-www-form-urlencoded, тогдаForm DataСпособ
  2. еслиapplication/jsonилиmultipart/form-data, тогдаRequestPayloadПуть.

существуетPOSTпредставление

Content-Type формат запроса
application/x-www-form-urlencoded formdata
application/json request payload
multipart/form-data request payload

отТипы MIME для MDNЭту статью можно увидеть:multipart/form-dataможно использовать наHTMLФормы отправляют информацию из браузера на сервер. так каксоставнойФормат документа, который состоит из разных частей, разделенных граничными линиями (строка, начинающаяся с «--»). Каждая часть имеет свою собственную сущность и свою собственнуюHTTPзаголовок запроса,Content-Dispositionа такжеContent-TypeИспользуется в поле загрузки файла, чаще всего используется (Content-Lengthпотому что граница игнорируется как разделитель). Как показано ниже:

Form Data

Content-Type: multipart/form-data; boundary=aBoundaryString

(other headers associated with the multipart document as a whole)

--aBoundaryString
Content-Disposition: form-data; name="myFile"; filename="img.jpg"
Content-Type: image/jpeg

(data)
--aBoundaryString
Content-Disposition: form-data; name="myField"

(data)
--aBoundaryString
(more subparts)
--aBoundaryString--

Request Paload

В чем разница между полезной нагрузкой запроса и formData в HTTP-запросе?

объясняется следующим образом: FormDataа такжеPayloadдабраузерпередатьинтерфейсдва формата, два путибраузерчерезContent-Typeзначение для различения, если оноapplication/x-www-form-urlencoded, тогдаForm DataПуть, если этоapplication/jsonилиmultipart/form-data, тогдаRequestPayloadПуть.

Ссылка на ссылку:stackoverflow.com/questions/2…Объяснение следующее:

Запрос может выглядеть так, если он сопровождается:

POST /some-path HTTP/1.1
Content-Type: application/json

{ "foo" : "bar", "name" : "John" }

если ты простойajaxпросить. просилheaderбудет установлен наContent-Type: application/json. Браузер просто расценит вашу отправку какpayloadПокажите ему, это все, что он может сделать, потому что он не знает, откуда берутся данные.

Если вы отправляетеhtmlсформировать и настроитьmethod="post", и установитеContent-Type: application/x-www-form-urlencodedилиContent-Type: multipart/form-data. Тогда ваш запрос может выглядеть так:

POST /some-path HTTP/1.1
Content-Type: application/x-www-form-urlencoded

foo=bar&name=John

здесьform-dataто естьrequest payload. Здесь браузер знает больше: он знаетbarполе ввода для отправки формыfooценность . Это то, что он показывает вам.

Так что разница в том, что они просто потому, чтоContent-TypeРазница в настройках не является разницей в способе отправки данных, обе отправки будут помещать данные вmessage-bodyсередина. ноchromeИнструменты разработчика браузера будут основаны на этомContentTypeРазличайте способы отображения.

Здесь мы знаем, на самом деле поставленыpayloadсередина.Так в чем же разница? Почему иногда бэкэнд не может получить значение?? Это должно быть правдойpayloadспособ анализа. Мы берем несколькоchromeСледующий тестовый пример объяснит эту логику.

традиционныйForm表单Сцена подчинения строится следующим образом:

<form action="/" method="POST">
    <input name="name" type="text">
    <input name="password" type="text">
    <button>提交</button>
</form>

Если я нажму кнопку «Отправить», принесет браузер для отправки функции, результат похож на?

будь осторожен

можно увидетьContent-Typeдляapplication/x-www-form-urlencoded. Значение находится в видеkey1=value1&key2=value2представлены в форме.

традиционныйajaxпредставить строительство сцены

function submit2() {
    var xhr = new XMLHttpRequest();
    xhr.timeout = 3000;
    var obj = {a: 1, b: 2};
    xhr.open('POST', '/');
    xhr.send(obj);
}

Сначала мы создаем простую функцию, а затем запускаем ее. пройти черезchromeИз отзыва:

ТрадицияajaxОтправьте следующие пункты

  1. По умолчанию的Content-Typeдляtext/plain.
  2. Request PayloadМы будем выполнять нестроковое преобразование строк.
  3. пройти черезxhr.send(JSON.stringify(obj));Может изменить содержимое для отправки

будь осторожен

  1. Когда мы передаем строки,Content-TypeАвтоматически конвертировать вxxx-form-xxxформа. Когда это объект, он автоматически преобразуется вxxx/json.
  2. Строка сkey1=val1&key2=val2воплощается в виде предмета в видеJSONВыражается в виде строки.

Суммировать

Content-Typeразница

  1. традиционныйajaxпри запросе,Content-Typе по умолчанию文本Типы.
  2. традиционныйformПри подаче,Content-TypeПо умолчаниюFormТипы.
  3. axiosПри передаче строкиContent-TypeПо умолчаниюFormТипы.
  4. axiosПри передаче объектаContent-TypeПо умолчаниюJSONТипы.

Content-Typeзначение ,Formа также非Formчас,payloadРазница:

  1. Оба поддерживают только строковые типы (несколько случаев рассмотрены выше).
  2. FormПередаваемый форматkey1=value1&key2=value2,аналогичныйGETпросилQueryStringФормат
  3. НетFormв общемJSON.stringify(formDataObject)форма

Поэтому, если серверная часть не может получить значение, независимо от того, какая форма передается, когда серверная часть анализирует информацию формы, она будет учитыватьContent-Type. еслиJSONСтрока, внутренний синтаксический анализpayloadКогда содержаниеJSON. еслиkey1=value1&key2=value2форма, вам нужно разделить строку. Эти вещи обычно обрабатываются фреймворком, используемым бэкендом, но интерфейс значений, предоставляемый фреймворком для бэкенда, может отличаться, поэтому партнеры переднего плана должны обсуждать с партнерами бэкенда при работе с запросом. проблемы.JSONещеFormData.

Использованная литература:

  1. MIME-тип
  2. Content-Type
  3. How to set a boundary on a multipart/form-data request while using jquery ajax FormData() with multiple files

Распространенными типами медиаформатов являются следующие:

  • text/html: формат HTML
  • text/plain: обычный текстовый формат
  • text/xml: формат XML
  • image/gif: формат изображения GIF
  • image/jpeg: формат изображения jpg
  • image/png: формат изображения png

кapplicationТипы медиаформатов, начинающиеся с:

  • application/xhtml+xml: формат XHTML
  • application/xml: формат данных XML
  • application/atom+xml: Формат агрегации Atom XML
  • application/json: формат данных JSON
  • application/pdf: формат пдф
  • application/msword: Формат документа Word
  • application/octet-stream: данные двоичного потока (например, загрузка обычных файлов)
  • application/x-www-form-urlencoded:<form encType=””>по умолчаниюencType,formДанные формы кодируются какkey/valueФормат отправляется на сервер (формат формы по умолчанию для отправки данных)

Другой распространенный формат мультимедиа используется при загрузке файлов:

  • multipart/form-data: Вам нужно использовать этот формат, когда вам нужно загрузить файлы в форме
Категории