Разница между данными POST через HTTP <form>и AJAX с точки зрения кодирования данных

Question

Может ли кто-нибудь объяснить основное различие между отправкой данных через традиционный HTTP <form> и через AJAX с точки зрения кодирования данных?

На самом деле я сталкиваюсь с проблемой потери данных при отправке данных на сервер через AJAX. Все после   будет потеряно.

Если я отправлю следующий фрагмент данных на сервер через jQuery AJAX

<p>test 1</p>
<p>&nbsp;</p>
<p>test 2</p>

Я получу следующие усеченные данные на сервере

<p>test 1</p>
<p>

Но если я отправляю те же данные через обычную отправку формы HTTP POST, то все данные достигаются на сервере.

Чтобы проверить, как данные кодируются при обычной отправке формы Я изменил метод формы с POST на GET и обнаружил, что приведенные выше данные кодируются как (извлеченные из строки запроса)

<p>test+1<%2Fp>%0D%0A<p>%26nbsp%3B<%2Fp>%0D%0A<p>test+2<%2Fp>

Значит ли это, что форма HTTP выполняет эту кодировку автоматически?

И если нам нужно отправить эти данные на сервер через AJAX, то мы должны закодировать их с помощью некоторой функции кодирования, например encodeURIComponent()?

Я использовал encodeURIComponent() и нашел что все данные успешно получены на сервере, как при обычной отправке формы HTML.

Может кто-нибудь пролить свет на эту топи c с некоторыми подробностями?

Answer 1

HTML формы будут отправлять данные в поля формы в соответствии с одним из трех стандартов на основе значения поля enctype.

Ajax позволит вам отправить строку, которую вы можете отформатировать как вам нравится . Вы также можете передавать определенные виды объектов, которые будут кодироваться с использованием некоторого стандарта (например, a FormData объект будет кодироваться с использованием того же многочастного формата, который вы можете выбрать с помощью enctype в форме.

encodeURIComponent будет экранировать специальные символы для строки запроса или запроса application / x- www-form-urlencoded так же, как форма будет по умолчанию или если вы установите enctype в application/x-www-form-urlencoded. Вам следует запустить ее над каждым ключом и значением в вашей строке, если вы используете его для кодирования данных вручную. Вместо этого вы можете использовать объект URLSearchParams.

const html = `<p>test 1</p>
<p>&nbsp;</p>
<p>test 2</p>`;
const data = new URLSearchParams();
data.append("data", html);
const response = await fetch("http://example.com", { method: "POST", body: data });
const responseData = await response.json();
console.log(responseData);

Поскольку вы упомянули jQuery, вы можете передать это обычный объект:

const html = `<p>test 1</p>
<p>&nbsp;</p>
<p>test 2</p>`;
const data = { data: html };
const response = await jQuery.ajax("http://example.com", { method: "POST", data: data });
console.log(response);