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

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

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

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

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

ajax.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 пусть будет блок для результата и блок для меню:

index.php<div id="result"></div>
<div id="menu"></div>

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

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

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

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

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

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

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

javascriptlet links = [];

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

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

script.jsfor (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;
  });
}

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

script.js(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;
    });
  }
})();

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