Давайте отправим научимся отправлять HTML формы без перезагрузки страницы.
Пусть у нас есть следующая форма:
<form action="" method="GET">
<input name="num1">
<input name="num2">
<input type="submit">
</form>
Давайте отправим эту форму через AJAX. Для начала получим ссылку на форму в переменную:
let form = document.querySelector('form');
Получим также ссылки на элементы формы:
let input1 = document.querySelector('[name="num1"]');
let input2 = document.querySelector('[name="num2"]');
Из содержимого инпутов сформируем строку
с параметрами и добавим ее к адресу. Используем
для этого URLSearchParams
:
form.addEventListener('submit', function(event) {
let searchParams = new URLSearchParams();
searchParams.set('num1', input1.value);
searchParams.set('num2', input2.value);
let path = '/handler/?' + searchParams.toString();
});
Запретим отправку формы "естественным" путем:
form.addEventListener('submit', function(event) {
event.preventDefault(); // отменим отправку формы
});
Соберем весь код вместе и отправим форму через AJAX:
form.addEventListener('submit', function(event) {
let searchParams = new URLSearchParams();
searchParams.set('num1', input1.value);
searchParams.set('num2', input2.value);
let path = '/handler/?' + searchParams.toString();
fetch(path).then(
response => {
return response.text();
}
).then(
text => {
console.log(text); // ответ сервера
}
);
event.preventDefault();
});
Выведем в консоль сервера отправленные данные:
export default {
'/handler/': function({get}) {
console.log(get);
return 'form data received';
}
}
Пусть сервер ожидает три параметра с числами, а возвращает сумму этих чисел. На клиенте сделайте форму для ввода этих чисел. Отправьте форму через AJAX. После получения ответа сервера запишите этот ответ в какой-нибудь абзац.