Метод GET отправлен вместо DELETE

Question

Я пытаюсь написать интерфейс приложения и столкнулся с проблемой. Я пытался реализовать метод DELETE с использованием AJAX, но, согласно Spring, GET отправляется, когда я запускаю код.

HTML код:

    <tr th:each="attraction : ${attractions}" th:object="${attraction}">
    <td th:text="*{name}"></td>
    <td th:text="*{latitude}"></td>
    <td th:text="*{city}"></td>
    <td><a th:href="|/edit/*{id}|">EDIT</a></td>
    <script>
        function sendDelete(event) {
            xhttp.preventDefault();
            xhttp.open("DELETE", this.href);
            xhttp.send();
        }
    </script>
    <td><a th:href="|/delete/*{id}|" onclick="sendDelete(event);">DELETE</a></td>
</tr>

Код пружины:

  @DeleteMapping("/delete/{id}")
  String delete(@ModelAttribute Attraction attraction) {
   attractionService.delete(attraction);
   return "redirect:/";
  }

Как я мог решить эту проблему? Заранее спасибо.

Answer 1

Вы прошли долгий путь, чтобы это исправить.

Теги ссылок могут отправлять любой http-метод по вашему желанию, если вы обрабатываете его в JavaScript и вызываете protectDefault.

Но вы должны сделать это для события, переданного в обработчик кликов, а не для объекта xhttp. Таким образом, на вашем обработчике событий вы должны были сделать

event.preventDefault()

а не:

xhttp.preventDefault()

Ваша форма взлома не идиоматична. Это пугает следующего человека, который работает над этим кодом!

Answer 2

С некоторой помощью я мог разобраться в проблеме. Основная проблема в том, что
Тег может обрабатывать только методы GET.

Вместо этой части моего кода я разобрал ее так в HTML:

    <td>
        <form th:method="DELETE" th:action="|/delete/*{id}|">
            <input type="submit" value="Send">
        </form>
    </td>

Теперь все работает отлично.