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

Давайте теперь научимся отправлять HTML формы через AJAX без перезагрузки страницы. Начнем с самого простого варианта - отправки данных формы через метод GET.

Пусть у нас есть следующая форма для ввода двух чисел:

<form action="" method="GET" id="form">
	<input type="text" name="num1">
	<input type="text" name="num2">
	<input type="submit">
</form>

Пусть после отправки формы мы хотим получить сумму введенных чисел:

<?php
	echo $_GET['num1'] + $_GET['num2'];
?>

Давайте отправим эту форму через AJAX. Для начала получим ссылку на форму в переменную:

let form = document.querySelector('#form');

Начнем с того, что запретим отправку формы "естественным" путем. Для этого навесим на форму (не на кнопку отправки) событие submit и в нем вызовем preventDefault:

form.addEventListener('submit', function(event) {
	event.preventDefault(); // отменим отправку формы
});

Теперь попытка отправить форму не будет приводить ни к чему, в том числе и к перезагрузке страницы. Пол дела сделано. Осталось отправить нашу форму через AJAX.

Для этого получим данные из всех инпутов и отправим их GET параметрами адреса в функции fetch. Сделаем это.

Для начала получим наши инпуты в переменные:

form.addEventListener('submit', function(event) {
	let input1 = document.querySelector('[name="num1"]');
	let input2 = document.querySelector('[name="num1"]');
	
	event.preventDefault();
});

Будем осуществлять поиск инпутов не по всему документу, а внутри нашей формы:

form.addEventListener('submit', function(event) {
	let input1 = this.querySelector('[name="num1"]');
	let input2 = this.querySelector('[name="num1"]');
	
	event.preventDefault();
});

Давайте теперь получим данные наших инпутов:

form.addEventListener('submit', function(event) {
	let input1 = this.querySelector('[name="num1"]');
	let input2 = this.querySelector('[name="num1"]');
	
	let num1 = input1.value;
	let num2 = input2.value;
	
	event.preventDefault();
});

Отправим теперь эти данные через GET параметры:

form.addEventListener('submit', function(event) {
	let input1 = this.querySelector('[name="num1"]');
	let input2 = this.querySelector('[name="num1"]');
	
	let num1 = input1.value;
	let num2 = input2.value;
	
	let url = 'ajax.php?num1=' + num1 + '&num2=' + num2;
	let response = await fetch(url);
	
	let text = await response.text();
	result.textContent = text;
	
	event.preventDefault();
});

Сделайте форму, которая будет отправлять пять чисел. Пусть сервер в качестве ответа возвращает произведение этих чисел. Проверьте обычную отправку формы с перезагрузкой страницы.

Сделайте теперь так, чтобы форма отправлялась через AJAX.