Ajax调用@DeleteMapping报404，删除后页面无法显示求助

核心问题 #

1. Ajax与视图返回的冲突：@DeleteMapping直接返回视图字符串（displayAllLocations）不符合Ajax请求的设计逻辑——Ajax期望接收数据（如状态码、JSON）而非完整页面，且Spring Boot的视图解析是为浏览器跳转服务的，Ajax拿到HTML后不会自动渲染页面。
2. URL路径不匹配：若控制器类未添加@RequestMapping("/LocCon")前缀，Ajax请求URL中的/LocCon会导致404错误。
3. a标签默认行为干扰：点击<a>标签时，浏览器会默认触发href的跳转，与Ajax请求冲突，可能引发异常。

具体修复步骤 #

1. 阻止a标签的默认跳转行为

修改JSP中的a标签代码，确保点击时只执行Ajax逻辑，不触发页面跳转：

<td><a href="#" id="locID" onclick="return deleteRecord('${location.id}');">Delete</a></td>

同时在deleteRecord函数末尾添加return false;：

function deleteRecord(locId) 
{
    // 原有Ajax逻辑保持不变
    let contextURL = '/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');
    };

    // 阻止a标签默认跳转
    return false;
}

2. 验证控制器的URL前缀

确保控制器类上添加了@RequestMapping("/LocCon")，匹配Ajax请求的URL路径：

@Controller
@RequestMapping("/LocCon") // 必须添加该前缀，否则URL路径不匹配
public class LocCon {
    // 你的@GetMapping和@DeleteMapping方法
}

3. 重构后端接口适配Ajax

将@DeleteMapping改为返回状态码，而非视图字符串：

@DeleteMapping("/deleteLocation/{id}")
public ResponseEntity<Void> deleteLocation(@PathVariable int id)
{
    Location location = new Location();
    location.setId(id);
    locationService.deleteLocation(location);
    // 返回200成功状态码，告知前端删除完成
    return ResponseEntity.ok().build();
}

4. 优化前端Ajax回调逻辑

根据需求选择两种方案之一：

• 方案A：刷新整个页面（简单直接）
  修改deleteRecord的onload回调：

  xhr.onload = function() 
  {
      if (xhr.status != 200) 
      {
          console.log('ERROR');
      }
      else
      {
          // 删除成功后刷新页面，自动加载最新数据
          window.location.reload();
      }
  };
  

• 方案B：局部更新页面（无刷新体验）
  先给表格添加容器包裹（比如<div id="locationTableContainer">），然后修改listAllPageCall函数，将返回的HTML替换到容器中：

  function listAllPageCall() 
  {
      let parmURL = '/LocationWeb/LocCon/listAllLocations/'; // 推荐用相对路径
      var xhr = new XMLHttpRequest();
      xhr.open("GET", parmURL);
      xhr.send();
      xhr.onload = function() 
      {
          if (xhr.status != 200) 
          {
              console.log('ERROR');
          }
          else
          {
              // 替换页面中的表格容器内容
              document.getElementById('locationTableContainer').innerHTML = xhr.responseText;
          }
      };
      xhr.onerror = function()
      {
        console.log('NO CONNECTION');
      };
  }
  

内容的提问来源于stack exchange，提问作者S14321K