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

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

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

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

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

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

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

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

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

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

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

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

button.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:

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

Дан массив:

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

Отправьте его на клиент в формате JSON. На клиенте получите этот массив и найдите сумму его элементов.

Дан массив:

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

Отправьте его на клиент в формате JSON. На клиенте получите этот массив и запишите каждый его элемент в отдельный тег li тега ul.

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

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

На клиенте по нажатию на кнопку получите этот массив. Выведите элементы полученного массива в виде HTML таблицы.