2

Мне нужен совет, как правильно обновлять html после отправки ajax запроса.
Предположим есть обычная страница с комментариями. На сервере при запросе странице идет запрос в базу на получение всех комментариев. Грубый пример:

$query = mysqli_query($link, "SELECT * FROM Comments WHERE page_id = 2");
if (mysqli_num_rows($query) > 0) {
  while ($data = mysqli_fetch_assoc($query)) {
    $render . = "<div class="comment-row"><h3>{$data['author']}</h3><p>{$data['message']}</p></div>"
  }
  echo $render;
}

Таким образом происходит начальная отрисовка страницы. Есть форма отправки комментария, которая отправляется посредством ajax.

$.ajax({
  url: 'comment.php',
  data: data, //здесь данные из формы собранные с помощью FormData();
  type: 'post',
  contentType: false,
  processData: false,
}).done(function (data){
  ... //делаем что-то с отрисовкой.
});  

На сервере эти данные отлавливаются, данные кладутся в базу и вот вопрос, а как правильно обновлять html после добавления? Самый банальный вариант, просто оставить простую форму без ajax, но хочется динамики.
Вариант 1:
На сервере кладем в базу инфу и после успешной процедуры возвращаем json параметров, которые только что были отправлены формой:
test.php

...
mysqli_query($link, "INSERT INTO Comments (author, message) VALUES ('{$_POST['author']}', '{$_POST['message']}')");
exit(json_encode([$_POST['author'], $_POST['message']]));

клиент

...//ajax
.done(function (data){
  data = JSON.parse(data);
  let firstComment = $('.comment-row:first');
  firstComment.before(`<div class="comment-row"><h3>${data.author}</h3><p>${data.message}</p></div>`);
});

Таким образом мы вроде как не генерируем лишний html код на сервере, а перекладываем все это дело на клиента освобождая сервер.
Вариант 2:
Примерно тоже самое, но вместо отдачи json мы отдаем готовый html нового поста с комментом.
test.php

...
$data = "<div class="comment-row"><h3>{$_POST['author']}</h3><p>{$_POST['messge']}</p></div>";
exit($data);

Клиент

...
.done(function (data){
  $('.comment-row:first').before(data);
});

Вариант 3:
Не паримся и просто запрашиваем все комменты из бд и отдаем их целиком:
test.php

... //выбираем из бд все комменты после вставки нового
$comments = '';
while ($data = mysqli_fetch_assoc($query)) {
  $comments .= "<div class=\"comment-row\"><h3>{$data['author']}</h3><p>{$data['message']}</p></div>"
}
exit($comments);  

Клиент

...
$('#container-comments').html(data);  

Вариант 4
Совершенно не паримся и просто перезагружаем страницу. После перезагрузки изначальным скриптом мы получим все комменты, однако зачем тогда вообще ajax?

Собственно какой вариант сейчас применяется и является наиболее правильным? Возможно я что-то упускаю и есть более лучшее решение?
Весь код написан сугубо для примера и общей наглядности, поэтому в нем нет никаких проверок входящих данных на SQL-инъекции и другие уязвимости в пользу краткости изложения примера.

UPD: Проект в рамках которого задается вопрос, представляет собой подобие соцсети, с возможностью размещения объявлений, создания групп (подобие групп ВК), наличием профиля пользователя с включенным в него возможностью создания фотоальбомов, хранилища документов и возможностью обмениваться личными сообщениями между зарегистрированными участниками. (Относительно вопроса про комменты - комменты можно оставлять в объявлениях, группах и других подобных фукнционалах проекта, при чем к комментам предполагается прикрепление фото или документов. Исходя из этого помимо комментов с ajax отправкой формы, точно также может быть реализованы добавление новых объявлений/групп/записей/сообщений).

5
  • 1
    Вариант 1 очень хорош. Приближен к идеалу, с точки зрения SPA. Если хотите работать с ajax, рекомендую почитать что такое REST. 20 ноя 2018 в 11:54
  • 1
    А что бы вам не дублировать код, который создает html разметку коммента, надо все комменты также запрашивать через ajax. 20 ноя 2018 в 11:57
  • @StepanKasyanenko Спасибо за ответ! Но можно чуть поподробнее? Я понимаю с точки зрения работы с php, что изначальный контент отдается сервером, как я показал в начале вопроса, но как это сделать запросом через ajax и для чего нужен REST? Насколько я знаю с помощью REST пишут API обращаясь к разным роутам. Вы имеете ввиду сделать веб-приложения по типу REST, где на каждый запрос будет отдавать тот самый JSON пакет данных, который уже будет применен JSом для генерации верстки? Эдакий первый вариант из вопроса, но глобальный.
    – krown_loki
    20 ноя 2018 в 12:26
  • 1
    В принципе вы правы, да. Я тут подумал, что сложно дать объективный ответ раках всего проекта. В рамках вашего вопроса Вариант 1 хорош. Но и у Варианта 2 есть преимущество в плане отсутствия дублирования кода. Можете дополнить вопрос с информацией о проекте: для чего он, на какой стадии, какие технологии используются. Тогда можно будет дать долее объективный ответ. 20 ноя 2018 в 12:36
  • @StepanKasyanenko Обновил вопрос
    – krown_loki
    20 ноя 2018 в 13:39

1 ответ 1

1

На странице сохраняем время когда мы последний раз обновляли данные.

На сервере реализуем метод, возвращающий массив сообщений, которые были созданы или обновлены после запрошенного времени.

Этот метод можно вызывать по таймеру и обязательно после отправки/изменения своего сообщения.

2
  • Не подскажете, каким образом хранить время обновления на странице? Для нескольких блоков подобного рода (если допустим есть не только комментарии) необходимо будет хранить несколько меток времени? И если вызывать подобный метод по таймеру, он неизбежно раз в несколько секунд (зависит от таймера) долбить запросами сервер и в частности БД на предмет обновления. На мой взгляд это не очень хорошо. Поправьте, если я не прав.
    – krown_loki
    20 ноя 2018 в 14:06
  • Насчет таймера - согласен, сейчас есть и другие методы. Хранить время можно как в скрытом поле той же формы, которой отправляете сам текст, так и просто в переменной JavaScript'а 21 ноя 2018 в 6:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.