GET method sent instead of DELETE

Question

I am trying to write the frontend of an application, and I've run into a problem. I've been trying to realize a DELETE method using AJAX, but according to Spring a GET is sent when I run the code.

HTML code:

    <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>

Spring code:

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

How could I solve this problem? Thank you in advance.

What do you mean that according to spring, a get is sent? Are you saying the delete method in your spring code never gets called? — Robert Moskal, Jan 09 '19 at 03:14
Possible duplicate of [What is the difference between the different methods of putting JavaScript code in an ?](https://stackoverflow.com/questions/245868/what-is-the-difference-between-the-different-methods-of-putting-javascript-code) — Jason, Jan 09 '19 at 03:51
That's not related to your problem but you should use "@{...}" with th:href here. You are running into issues when setting a different context-root than "/". — Flocke, Jan 09 '19 at 13:19
@RobertMoskal I just wanted to refer to it that I get a whitelabel error, but yeah, it's not done by Spring... — lyancsie, Jan 09 '19 at 13:23
@Jason Thank you, I'm reading them carefully and write if they worked for me. — lyancsie, Jan 09 '19 at 13:23

Robert Moskal · Answer 1 · 2019-01-16T18:27:37.577

You went the long way around to fix this.

Link tags can send whatever http method you wish, as long as you are handling it in JavaScript and you call preventDefault.

But you have to do it on the event passed into the click handler not on the xhttp pbject. So on your event handler you should have done

event.preventDefault()

and not:

xhttp.preventDefault()

Your form hack isn't idiomatic. It'll freak out the next person who works on that code!

score -1 · Accepted Answer · answered Jan 09 '19 at 13:40

-1

With some help, I could figure out the problem. The basic problem is that the
< a > tag is only able to handle GET methods.

Instead that part of my code, I sorted it out like this in HTML:

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

Now it works perfectly.

answered Jan 09 '19 at 13:40

lyancsie

658
7
18

I think you went the long way around. – Robert Moskal Jan 14 '19 at 01:16

GET method sent instead of DELETE

2 Answers2