тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

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

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

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

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

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

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

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

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

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

Здесь пришло время уточнить некоторый не очевидный момент. Суть в следующем: страница ajax создана нами для обращения AJAX запросом, однако, никто не запрещает нам просто обратиться в ней через адресную строку браузера.

Давайте сделаем это, передав GET параметром число, например, так: /ajax/?num=3. В результате на экран должен вывестись квадрат переданного числа, то есть 9.

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

<?php if (isset($_GET['num'])) { echo $_GET['num'] * $_GET['num']; } else { echo 'Ошибка: не передан параметр!'; } ?>

Давайте теперь напишем клиентскую часть. Пусть по нажатию на кнопку отсылается GET запрос с числом, а результат записывается в див:

<div id="result"></div> <input type="submit" id="button"> let result = document.getElementById('result'); let button = document.getElementById('button'); button.addEventListener('click', function() { let promise = fetch('/ajax/?num=3'); // передаем параметром число promise.then( response => { return response.text(); } ).then( text => { result.innerHTML = text; } ); });

Можно не задавать передаваемое число вручную, а сделать, например, инпут для ввода этого числа:

<div id="result"></div> <input type="text" id="input"> <input type="submit" id="button"> let result = document.getElementById('result'); let input = document.getElementById('input'); let button = document.getElementById('button'); button.addEventListener('click', function() { let promise = fetch('/ajax/?num=' + input.value); // число берем из инпута promise.then( response => { return response.text(); } ).then( text => { result.innerHTML = text; } ); });

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

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

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

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

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

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

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

Модифицируйте предыдущую задачу так, чтобы вместо абзаца был список ul. Сделайте так, чтобы каждый новый ответ сервера записывался в новую li тега ul.