Работа с JSON в AJAX на PHP

Пусть на сервере есть некоторый массив:

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

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

Так как протокол HTTP поддерживает только работу со строками, то нужно на серверной части запаковать каким-то образом наш массив в строку, передать эту строку через AJAX, а затем на клиенте распаковать эту строку обратно в массив.

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

Итак, запакуем наш массив на сервере:

<?php
	$arr = [
		[
			'name' => 'user1',
			'age'  => 25,
		],
		[
			'name' => 'user2',
			'age'  => 26,
		],
		[
			'name' => 'user3',
			'age'  => 27,
		],
	];
	
	echo json_encode($arr);
?>

А по получению распакуем его на клиенте и выведем, например, в консоль:

<input type="submit" id="button">

let button = document.getElementById('button');

button.addEventListener('click', function() {
	let promise = fetch('/ajax/');
	
	promise.then(
		response => {
			return response.text();
		}
	).then(
		data => {
			console.log(JSON.parse(data));
		}
	);
});

Не обязательно использовать JSON.parse - в объекте response есть метод .json(), который рассматривает ответ сервера как JSON и сразу же преобразует этот ответ в формат JavaScript:

<input type="submit" id="button">

let button = document.getElementById('button');

button.addEventListener('click', function() {
	let promise = fetch('/ajax/');
	
	promise.then(
		response => {
			return response.json(); // используем метод json
		}
	).then(
		data => {
			console.log(data);
		}
	);
});

Преимущества обмена данными через JSON в том, что в таком виде данные занимают меньше места, нежели, чем передавать их с уже оформленным HTML кодом.

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

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

<?php
	$arr = [
		[
			'surname' => 'surname1',
			'name'    => 'user1',
			'age'     => 25,
		],
		[
			'surname' => 'surname2',
			'name'    => 'user2',
			'age'     => 26,
		],
		[
			'surname' => 'surname3',
			'name'    => 'user3',
			'age'     => 27,
		],
	];
?>

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

Пусть в базе данных есть таблица employees, которую мы уже делали в предыдущих уроках.

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

Сделайте так, чтобы каждое нажатие на кнопку приводило к загрузке в HTML таблицу трех новых пользователей из базы данных.

Пусть сервер передает данные в формате JSON, а клиент превращает эти данные в ряды и ячейки HTML таблицы.

Обратный транспорт

Данные в формате JSON также можно передавать с клиента на сервер. В этом случае на клиенте данные превращаются в строку с помощью JSON.stringify, а в PHP части преобразуются обратно с помощью функции json_decode.

Давайте посмотрим на примере.

Пусть клиент имеет какой-нибудь массив. Давайте превратим его в JSON и передадим на сервер:

<input type="submit" id="button">

let button = document.getElementById('button');

button.addEventListener('click', function() {
	let data = ['user1', 'user2', 'user3'];
	let promise = fetch('/ajax/?data=' + JSON.stringify(data));
});

Полученные сервером данные затем легко превращаются в массив:

<?php
	if (isset($_GET['data'])) {
		$data = json_decode($_GET['data']);
		var_dump($data); // массив
	}
?>

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

let arr = [
	{
		name: 'user1',
		age:  25,
	},
	{
		name: 'user2',
		age:  26,
	},
	{
		name: 'user3',
		age:  27,
	},
];

AJAX запросом передайте этот массив на сервер. Пусть серверный скрипт добавит в этот массив еще одного юзера 'user4' с возрастом 28 и отправит новый массив обратно.

Пусть клиент по получению ответа сервера выведет элементы полученного массива в виде списка ul.

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

Сделайте так, чтобы по клику на любую ячейку таблицы в ней появлялся инпут для редактирования данных.

По потери фокуса пусть данные по редактированию отправляются на сервер. Данными будут: id работника, которого мы редактировали, имя поля, которое мы редактировали, и новый текст этого поля. Передайте эти данные на сервер в формате JSON.