Пусть на сервере есть некоторый массив:
<?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.