Ajax response 404 for @DeleteMapping

Question

I'm trying to make a ajax call to delete and get a new page in response. But facing 404 error.

<c:forEach items="${listLocation}" var="location">
<tr>
  <td>${location.id}</td>
  <td>${location.code}</td>
  <td>${location.name}</td>
  <td>${location.type}</td>
  <td><a href="deleteLocation?id=${location.id}" id="locID" onclick="return deleteRecord('${location.id}');">Delete</a></td>
</tr>
</c:forEach>

Ajax call

function deleteRecord(locId) 
    {
        let contextURL = 'http://localhost:8080/LocationWeb/LocCon/deleteLocation/'
        let parmURL = contextURL + locId;
        var xhr = new XMLHttpRequest();
        xhr.open("DELETE", parmURL);
        xhr.send();
        xhr.onload = function() 
        {
            if (xhr.status != 200) 
            {
                console.log('ERROR');
            }
            else
            {
              listAllPageCall();
            }
        };
        xhr.onerror = function()
        {
          console.log('NO CONNECTION');
        };
    }
    
    function listAllPageCall() 
    {
        let parmURL = 'http://localhost:8080/LocationWeb/LocCon/listAllLocations/'
        var xhr = new XMLHttpRequest();
        xhr.open("GET", parmURL);
        xhr.send();
        xhr.onload = function() 
        {
            if (xhr.status != 200) 
            {
                console.log('ERROR');
            }
            else
            {
                console.log('Called');
            }
        };
        xhr.onerror = function()
        {
          console.log('NO CONNECTION');
        };
    }

Spring Boot code flow

This is to call the webpage to be displayed

@GetMapping("/listAllLocations")
public String displayLocations(ModelMap resModMap)
{
    List<Location> listLocation = locationService.getAllLocation();
    resModMap.addAttribute("listLocation", listLocation);
    return "displayAllLocations";
}

This is to delete and call the webpage like above one. Both response are same. But still getting the white lable error 404

@DeleteMapping("/deleteLocation/{id}")
public String deleteLocation(@PathVariable int id, ModelMap resModMap)
{
    //Location location = locationService.getLocationByID(id);
    Location location = new Location();
    location.setId(id);
    locationService.deleteLocation(location);
    List<Location> listLocation = locationService.getAllLocation();
    resModMap.addAttribute("listLocation", listLocation);
    return "displayAllLocations";
}

Delete is happening. Only the page is not getting displayed on response. Please help me.

I tried this way. By calling the get function in return. But no luck

@DeleteMapping("/deleteLocation/{id}")
public void deleteLocation(@PathVariable int id, ModelMap resModMap)
{
    //Location location = locationService.getLocationByID(id);
    Location location = new Location();
    location.setId(id);
    locationService.deleteLocation(location);
    displayLocations(resModMap);
}

Checked in debug, its getting into

xhr.onerror = function()
{
   console.log('NO CONNECTION');
};

Should I get response as webpage? Anything like that should be added?

Tried @RequestMapping, this works good.

@RequestMapping("deleteLocation")
public void deleteLocation(@RequestParam("id") int id, ModelMap resModMap)
{
    //Location location = locationService.getLocationByID(id);
    Location location = new Location();
    location.setId(id);
    locationService.deleteLocation(location);
    List<Location> listLocation = locationService.getAllLocation();
    resModMap.addAttribute("listLocation", listLocation);
    return "displayAllLocations";
}

In jsp

<td><a href="deleteLocation?id=${location.id}">Delete</a></td>