тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Работа с 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.