Передача JSON с сервера через AJAX в PHP

Давайте изучим мы изучим отправку JSON с сервера на клиент.

В этом случае на стороне PHP массив превращается в строку с помощью функции json_encode, а на клиенте строка превращается обратно в массив с помощью JSON.parse.

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

ajax.php<?php
  $data = [1, 2, 3];
?>

Преобразуем этот массив в JSON:

ajax.php<?php
  $data = [1, 2, 3];
  echo json_encode($data);
?>

При этом правильным подходом будет отдать соответствующий HTTP заголовок:

ajax.php<?php
  $data = [1, 2, 3];
  
  header('Content-Type: application/json');
  echo json_encode($data);
?>

Давайте теперь на стороне клиента получим отправленный JSON:

script.jsbutton.addEventListener('click', async function() {
  let response = await fetch('/ajax.php');
  let json = await response.text();
  
  console.log(json); // строка JSON
});

Превратим полученный JSON в массив с помощью JSON.parse:

script.jsbutton.addEventListener('click', async function() {
  let response = await fetch('/ajax.php');
  let json = await response.text();
  let data = JSON.parse(json);
  
  console.log(data); // массив
});

Можно упростить код, если вместо метода text использовать метод json объекта response:

script.jsbutton.addEventListener('click', async function() {
  let response = await fetch('/ajax.php');
  let data = await response.json();
  
  console.log(data); // массив
});

ajax.php<?php
  $arr = [1, 2, 3, 4, 5];
?>

ajax.php<?php
  $arr = ['a', 'b', 'c', 'd', 'e'];
?>

html<?php
  $arr = [
    [
      'surn' => 'surn1',
      'name' => 'user1',
      'age'  => 25,
    ],
    [
      'surn' => 'surn2',
      'name' => 'user2',
      'age'  => 26,
    ],
    [
      'surn' => 'surn3',
      'name' => 'user3',
      'age'  => 27,
    ],
  ];
?>