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

При выполнении запросов через fetch в адресе страницы можно также передавать GET параметры, например, вот так:

let promise = fetch('/handler/?get=data');

Можно также передать несколько параметров:

let promise = fetch('/handler/?get1=data1&get2=data2');

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

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

Клиентская часть

Пусть на нашей странице index.html будет расположен див и кнопка:

<div></div>
<button>click me</button>

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

let div    = document.querySelector('div');
let button = document.querySelector('button');

По клику на кнопку отправим AJAX запрос с GET параметром:

button.addEventListener('click', function() {
	fetch('/handler/?num=3').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			div.innerHTML = text; // запишем ответ сервера
		}
	);
});

Серверная часть

Теперь на сервере напишем обработчик GET запросов:

export default {
	'/handler/': function({get}) {
		return 'form data received';
	}
}

Получим в нем переданное число:

export default {
	'/handler/': function({get}) {
		console.log(get.num);
		return 'form data received';
	}
}

Возведем его в квадрат и отправим обратно:

export default {
	'/handler/': function({get}) {
		return get.num ** 2;
	}
}

Практические задачи

На клиенте дан див и кнопка. По нажатию на кнопку отправьте на сервер два числа. Пусть сервер найдет сумму переданных чисел. Результат запишите в див.

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