Передача GET параметров в запросе fetch в AJAX на PHP

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

Давайте посмотрим на примере. Пусть наша страница ajax.php ожидает, что при обращении к ней в GET параметре с именем num будет передаваться какое-то число.

Сделаем так, чтобы переданное число возводилось в квадрат и результат отправлялся обратно в браузер.

Напишем на странице ajax.php PHP код, реализующий это:

<?php
	echo $_GET['num'] * $_GET['num'];
?>

Давайте проверим, что наша PHP страница ajax.php работает верно. Для этого зайдем на эту страницу напрямую в браузере, например, вбив следующий URL: /ajax.php?num=3. В результате на экран должен вывестись квадрат переданного числа, то есть 9.

Учтем теперь, что, если не передать GET параметр, то возникнет ошибка. Давайте напишем более аккуратный PHP код:

<?php
	if (isset($_GET['num'])) {
		echo $_GET['num'] * $_GET['num'];
	} else {
		echo 'Error: need GET parameter!';
	}
?>

Давайте теперь напишем клиентскую часть. Пусть у нас будет блок и кнопка:

<div id="result"></div>
<button id="button">send</button>

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

let result = document.querySelector('#result');
let button = document.querySelector('#button');

Теперь по клику на кнопку выполним AJAX запрос, передав GET параметром некоторое число, а результат выведем в наш div:

button.addEventListener('click', async function() {
	let response = await fetch('/ajax.php?num=3');
	let text = await response.text();
	
	result.textContent = text;
});

На клиенте дана кнопка, инпут и абзац. В инпут вводится число и по клику на кнопку это число передается на сервер. Пусть сервер возвращает квадратный корень переданного GET параметром числа. После ответа сервера выведите результат в вашем абзаце.

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