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

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

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

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

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


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

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

Подскажите, как это реализовать, либо направьте на правильную мысль, если я все не так понял.
  • Вопрос задан
  • 226 просмотров
Решения вопроса 2
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
В целом, вы всё правильно думаете.

Выполняете запрос к серверу за обновлённой страницей.
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)
  )
Ответ написан
@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;
}


Далее, в зависимости от задачи, все будет усложняться и обрастать дополнительно кодом.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы