Ajax delete method in spring boot

Question

After looking on different questions on forums talking about the same problem, I still don't know how to resolve my Request method 'DELETE' not supported

An Ajax method call is fired when a user in the client-side press a button, this method retrieves the sportId wrapped in an Ajax call and send to spring controller to Delete method.

Ajax method:

function removeRow(link) { 
    var sportId = link.getAttribute("data-sport-id");

    $.ajax({
        type : "DELETE",
        url : "/sports-actions",
        data: {id : sportId},
        contentType: "application/json",
        dataType : 'json',
        success: function (result) {       
               console.log(result);                
        },
        error: function (e) {
            console.log(e);
        }
   })   

}

Spring controller:

@RestController
@RequestMapping("/sports-actions")
public class SportController {  

    @RequestMapping(value = "/{id}", method = RequestMethod.DELETE)
    public Object deleteSport(@PathVariable("id") String id) {
        return null;
    }
}

Edit:

even if I send id in url, I still get the same error

Ajax code:

 $.ajax({
        type : 'DELETE',
        contentType: "application/json",
        url : "/sports-actions?id="+sportId,
        dataType : 'json',
        success: function (result) {       
               console.log(result);                
        },
        error: function (e) {
            console.log(e);
        }
   }) 

Answer 1

Please see the difference between @RequestParam and @PathVariable.

If you want to use @ReqeustParam:

$.ajax({
    type : "DELETE",
    url : "/sports-actions",
    data: {"id" : sportId},
    contentType: "application/json",
    dataType : 'json',
    success: function (result) {       
           console.log(result);                
    },
    error: function (e) {
        console.log(e);
    }
})   

@RestController
@RequestMapping("/sports-actions")
public class SportController {  

    @RequestMapping(method = RequestMethod.DELETE)
    public Object deleteSport(@RequestParam("id") String id) {
        return null;
    }
}

If you want to use @PathVariable

$.ajax({
    type : "DELETE",
    url : "/sports-actions/" + sportId,
    contentType: "application/json",
    dataType : 'json',
    success: function (result) {       
           console.log(result);                
    },
    error: function (e) {
        console.log(e);
    }
}) 



@RestController
@RequestMapping("/sports-actions")
public class SportController {  

    @RequestMapping(value = "/{id}", method = RequestMethod.DELETE)
    public Object deleteSport(@PathVariable("id") String id) {
        return null;
    }
}

PS: It is always good to follow Restful best practices. see here

Answer 2

You are sending request to incorrect url. You declared path for the controller as /sports-actions/{id}, but actually sending it to /sports-actions with json body.

Correct code:

$.ajax({
    type : "DELETE",
    url : "/sports-actions/" + sportId,
    success: function (result) {       
           console.log(result);                
    },
    error: function (e) {
        console.log(e);
    }
});