Отправка форм методом GET через AJAX

Давайте отправим научимся отправлять 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. После получения ответа сервера запишите этот ответ в какой-нибудь абзац.