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

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

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

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

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

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

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

script.jslet form = document.querySelector('#form');

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

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

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

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

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

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

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

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

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

script.jsform.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 параметры:

script.jsform.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();
});