Разные запросы к одному файлу в AJAX в PHP

Давайте теперь сделаем так, чтобы мы не вручную делали ссылки, а их количество запрашивалось с сервера отдельным AJAX запросом.

To есть к нашему файлу ajax.php можно будет слать два типа запросов. Первый тип будет запрашивать длину массива, а второй тип будет запрашивать элемент массива по его номеру.

Пусть тип запроса будет регулироваться GET параметром type. Если мы хотим получить длину массива, пусть этот параметр имеет значение 'leng', а если элемент - то значение 'elem'.

Напишем соответствующий PHP код:

<?php
	$arr = ['a', 'b', 'c'];
	
	$type = $_GET['type'];
	
	switch ($type) {
		case 'leng':
			echo count($arr);
		break;
		case 'elem':
			$num = $_GET['num'];
			echo $arr[$num - 1];
		break;
	}
?>

Перейдем теперь к клиентской части. В файле index.php пусть будет блок для результата и блок для меню:

<div id="result"></div>
<div id="menu"></div>

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

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

Сразу по заходу на страницу выполним AJAX запрос на получения количества элементов массива:

let response = await fetch('/ajax.php?type=leng');
let leng = await response.text();

Создадим нужное количество ссылок:

for (let i = 1; i <= leng; i++) {
	let link = document.createElement('a');
	link.textContent = i;
	menu.append(link);
}

Доработаем код так, чтобы созданные ссылки складывались в массив:

let links = [];

for (let i = 1; i <= leng; i++) {
	let link = document.createElement('a');
	link.textContent = i;
	menu.append(link);
	
	links.push(link);
}

Переберем созданные ссылки и к каждой ссылки привяжем обработчик события:

for (let link of links) {
	link.addEventListener('click', async function() {
		let num = link.textContent;
		
		let response = await fetch('/ajax.php?num=' + num);
		let text = await response.text();
		
		result.textContent = text;
	});
}

Соберем весь код вместе, обернув в вызов функции на месте:

(async function() {
	let result = document.querySelector('#result');
	let menu   = document.querySelector('#menu');
	
	let response = await fetch('/ajax.php?type=leng');
	let leng = await response.text();
	
	let links = [];

	for (let i = 1; i <= leng; i++) {
		let link = document.createElement('a');
		link.textContent = i;
		menu.append(link);
		
		links.push(link);
	}
	
	for (let link of links) {
		link.addEventListener('click', async function() {
			let num = link.textContent;
			
			let response = await fetch('/ajax.php?num=' + num);
			let text = await response.text();
			
			result.textContent = text;
		});
	}
})();

Объясните, почему здесь нужно оборачивать код в вызов функции на месте.

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

Пусть у вас есть следующий массив с кусочками HTML кода:

<?php
	$arr = [
		'<div>text1</div>',
		'<div>text2</div>',
		'<div>text3</div>',
		'<div>text4</div>',
		'<div>text5</div>',
	];
?>

Сделайте ссылки, которые через AJAX будут получать заданный элемент этого массива и выводить его в нужном блоке.