Не срабатывает ajax

Question

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

//галерея
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
include $_SERVER['DOCUMENT_ROOT'] . '/templates/header.php';
?>
<title>Моя галерея</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
<link rel="stylesheet" href="/css/styleGallery.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@300&display=swap" rel="stylesheet" />
</head>
<body>
  <header class="header">
    <div class="container">
      <div class="header__body">
        <h1 class="heading">Моя галерея</h1>
        <div class="header-buttons">
          <a href="/index.php" class="gallery-link">Загрузить ещё</a>
          <button type="submit" form="form" name="delete" class="btn btn-danger">Удалить выбранные</button>
        </div>
      </div>
    </div>
  </header>
  <div class="container">
    <form id="form2">
      <h3 id="response"></h3>
      <div class="row row-cols-1 row-cols-md-3">
        <!-- карточка -->
        <?php include $_SERVER['DOCUMENT_ROOT'] . '/templates/card.php'; ?>
        <!-- карточка -->
      </div>
    </form>
  </div>
  <script src="/js/jquery-3.5.1.min.js"></script>
  <script src="/js/delete.js"></script>
  <?php include $_SERVER['DOCUMENT_ROOT'] . '/templates/footer.php'; ?>
  
  //js-обработчик 
  var response = document.getElementById("response");
const form = document.getElementById("form2");
form.addEventListener("submit", function (e) {
    e.preventDefault();
    const xhr = new XMLHttpRequest();
    const formData = new FormData(form);
    xhr.open("post", "/include/deleteFile.php", true);
    xhr.send(formData);
    console.log(formData);
    xhr.onload = function () {
        response.innerHTML = this.responseText;
    }
    document.querySelectorAll('input[type=checkbox]:checked').forEach(func);
    function func(item) {
        item.parentNode.parentNode.remove();
    }
});

//файл deleteFile.php
<?php
//Конструкция для массового удаления файлов
$dir = $_SERVER['DOCUMENT_ROOT'] . '/upload';
$files = scandir($dir);

if (isset($_POST['checked'])) { 
    foreach($_POST['checked'] as $check) {
        if (in_array(basename($check), $files )) {
            unlink($check);  
        }
    }
    echo "Файлы успешно удалены";
} else {
    echo "Файлы не выбраны";
}

БЛОГ НА HUSL

Не срабатывает ajax

Ответы (0 шт):