Как с помощью AJAX обновить список постов?

Question

[Алексей Кроссов]

Здравствуйте! Только начинаю изучать тему, поэтому, если что, сорри.

Дано: есть страница, на которой новости в 2 столбца (левый и правый). Столбец = категория новостей. То есть в одном про футбол, во втором про хоккей. На превью-блоке каждой новости есть select блок с 2 функциями: удалить новость и изменить категорию новости.

Задача: при клике на Удалить, новость плавно скрывается. При Смене категории новость должна пропадать в одном столбце и появляться в другом.

Что пока что получилось:

$.ajax({
        type: 'POST',
        url: '/deletePost.php',
        data: {url: postUrl} //postUrl = ссылка на новость, которую PHP обрабатывает и получает ID новости, чтобы удалить ее из базы
    }).done(function() {
        //Пока не придумал, что написать сюда
});

Это успешно удаляет новость из базы, но не знаю, как обновить блок с новостями. То есть теоретически представляю, что нужно обратиться через AJAX к этой же странице, но уже с учетом того, что одна новость была удалена. Взять html и заменить на текущей странице. Ну или если проще, то просто сделать .hide() для той новости, которую удалил.

То же самое касается Смены категории: нужно взять html с обновленной страницы и вставить в текущую. Тут уже с помощью .hide() можно только скрыть новость в одном блоке, но как отразить ее в другом.

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

Answer 1

[Alex]

В целом, вы всё правильно думаете.

Выполняете запрос к серверу за обновлённой страницей.

fetch( location.href )
.then(r => r.text())
.then(html => {
 // html -- HTML код текущей страницы. Так если бы мы просто обновили страницу.
})

Далее, из обновлённого кода нужно достать кусочек с новостями. Простейший способ построить DOM:

const template = document.createElement('template')
template.innerHTML = html

const selector = '.posts-container' // Селектор элемента который нужно обновить

document
  .querySelector(selector)
  .replaceWith(
    template.content.querySelector(selector)
  )

Comments

[Алексей Кроссов]

В том, что это не поможем при смене категории. Ну точнее скрыть в одной поможет, а вот отобразить в другой нет. Причем не просто в начало списка нужной категории добавить, а в соответствии с сортировкой по дате добавления.

[Alex]

Алексей Кроссов, Обновил ответ. Но, лучше было бы, сделать отдельный API для отображения постов, чтобы сервер не генерировал всё страницу а только кусочек.

UPD
По примеру, как в этом ответе.

[Alex]

Алексей Кроссов, Ем ... не понял вашего вопроса ...

[Алексей Кроссов]

Alex, не правильно прочитал комментарий, извиняюсь

Answer 2

[AxisGroupTM]

В общем виде это выглядит как-то так:

$.ajax({
    type: 'POST',
    url: '/ajax/post.php',
    data: {action: "delete OR change", id: postId}
  }).done(function(data){
    $(".target").html( data );
  });

if ( $_SERVER["REQUEST_METHOD"]=="POST" && !empty($_POST["action"]) && !empty($_POST["id"]) ){
  switch( $_POST["action"] ){
    case("delete"):
// Delete $_POST["id"]
      break;
    case("change"):
// Change category $_POST["id"]
      break;
  }
  $posts = GetPosts();
  die( $posts );
}
function GetPosts(){
  $result = "";
// Получаем данные и формируем html строку
  return $result;
}

Далее, в зависимости от задачи, все будет усложняться и обрастать дополнительно кодом.