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

Пусть у нас есть какая-нибудь HTML форма с тегом form:

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

Как вы уже знаете, такая форма по нажатию на кнопку submit (либо по нажатию Enter в любом из инпутов) будет отправлять свои данные на сервер.

После отправки формы будет открываться страница, указанная в атрибуте action. То есть в браузере откроется другая страница - та, на которую ведет форма. Если же атрибут action пустой, как у нас сейчас, или не указан совсем - то произойдет перезагрузка страницы.

Давайте вместо того, чтобы отправлять форму обычным способом с перезагрузкой страницы, отправим эту форму через AJAX.

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

<form action="" method="GET" id="form"> <input type="text" name="num1"> <input type="text" name="num2"> <input type="submit"> </form> let form = document.getElementById('form'); form.addEventListener('submit', function(event) { event.preventDefault(); // отменим отправку формы });

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

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

Пусть в переменные num1 и num2 будут получены данные из инпутов:

let form = document.getElementById('form'); form.addEventListener('submit', function(event) { let num1 = 'содержимое первого инпута'; let num2 = 'содержимое второго инпута'; event.preventDefault(); });

Тогда наш запрос fetch будет выглядеть так:

let form = document.getElementById('form'); form.addEventListener('submit', function(event) { let num1 = 'содержимое первого инпута'; let num2 = 'содержимое второго инпута'; // Запрос: fetch('/ajax/?num1=' + num1 + '&num2=' + num2); event.preventDefault(); });

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

Начнем с первого инпута. Получим ссылку на первый инпут по атрибуту name (если не понятно, как это сделано - гуглите селекторы атрибутов CSS):

let input1 = document.querySelector('[name="num1"]');

Нам, в общем, не нужен сам инпут, а нужно его значение. Получим его:

let num1 = document.querySelector('[name="num1"]').value;

Давайте через метод querySelector будем осуществлять поиск не по всему документу, а именно внутри нашей формы. Это нужно в том случае, если у нас на странице несколько форм и в них есть инпуты с одинаковым атрибутом name.

В этом случае нам, конечно же, нужно, чтобы метод querySelector получал именно наш инпут, а не инпут из другой формы. Понятно, что сейчас у нас точно одна форма, но кто знает, какой будет ситуация дальше? Поэтому лучше сразу обезопасить наш код.

Итак, для решения проблемы метод querySelector применим не к document, а к форме. Так как мы пишем наш код внутри функции, привязанной к нашей форме, то в этой функции на форму будет ссылаться this.

Значит, вместо document.querySelector напишем this.querySelector:

let num1 = this.querySelector('[name="num1"]').value;

Аналогичным образом можно получить и содержимое второго инпута.

Итак, давайте получим числа, введенные в наши инпуты, и запишем их в соответствующие переменные:

<form action="" method="GET" id="form"> <input type="text" name="num1"> <input type="text" name="num2"> <input type="submit"> </form> let form = document.getElementById('form'); form.addEventListener('submit', function(event) { let num1 = this.querySelector('[name="num1"]').value; let num2 = this.querySelector('[name="num2"]').value; event.preventDefault(); });

Давайте теперь добавим fetch запрос, и наша задача будет решена:

<form action="" method="GET" id="form"> <input type="text" name="num1"> <input type="text" name="num2"> <input type="submit"> </form> let form = document.getElementById('form'); form.addEventListener('submit', function(event) { let num1 = this.querySelector('[name="num1"]').value; let num2 = this.querySelector('[name="num2"]').value; let promise = fetch('/ajax/?num1=' + num1 + '&num2=' + num2); promise.then( response => { return response.text(); } ).then( text => { alert(text); // результат выведем алертом на экран } ); event.preventDefault(); });

Напишем также какую-нибудь простейшую серверную часть, например, будем находить и возвращать сумму переданных чисел:

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

Пусть сервер ожидает три GET параметра с числами, а возвращает сумму этих чисел. На клиенте сделайте HTML форму для ввода этих чисел. Сделайте так, чтобы данные формы отправлялись через AJAX. После получения ответа сервера запишите этот ответ в какой-нибудь абзац.