$.ajax调用异常排查：jQuery点击函数内Ajax调用及404等问题

咱们一步步拆解并解决你遇到的两个核心问题：

一、搞定404错误：路径重复导致的资源找不到 #

从错误日志能看到请求URL是http://localhost:5080/Employee-Mybatis/employee/employee/employeeInfo——这里明显重复了两次employee/。问题出在相对路径的解析逻辑：如果你的当前页面已经处于/Employee-Mybatis/employee/路径下，Ajax里写的"employee/employeeInfo"会基于当前路径拼接，最终导致路径重复。

你可以选下面任意一种方案调整：

• 方案1：使用绝对路径
  直接写完整的服务端接口路径，彻底避免相对路径的解析歧义：

  url: "/Employee-Mybatis/employee/employeeInfo"
  

• 方案2：简化相对路径
  如果接口就在当前页面同级的employeeInfo路径下，直接缩短路径：

  url: "employeeInfo"
  

• 方案3：配置base标签统一基准路径
  在HTML的<head>里添加base标签，指定所有相对路径的基准：

  <base href="/Employee-Mybatis/employee/">
  

  之后Ajax里直接写url: "employeeInfo"，就会自动解析为/Employee-Mybatis/employee/employeeInfo。

二、移除同步XMLHttpRequest的弃用警告 #

主线程上的同步XHR被弃用，是因为它会完全阻塞浏览器主线程——请求未完成时，页面无法响应任何用户操作，严重影响体验。你需要把同步请求改成异步：

1. 首先删掉async: false配置（jQuery的Ajax默认就是异步模式，async: true可以直接省略）
2. 把原本依赖请求结果的逻辑，全部放到success回调函数里；或者用更现代的Promise/async-await写法处理异步流程。

修改后的基础异步版本： #

function showEmpDetails(empid) {
  console.log(empid);
  $.ajax({
    url: "/Employee-Mybatis/employee/employeeInfo", // 替换为调整后的正确路径
    success: function(result) {
      console.log(result);
      // 所有需要用到result的逻辑都要写在这里，比如更新页面、处理数据
    },
    error: function(xhr, status, error) {
      // 新增错误处理，方便快速排查问题
      console.error("请求出错：", status, error);
    }
  });
}

更现代的async-await版本： #

如果你习惯用异步语法糖，也可以把jQuery Ajax包装成Promise来用：

async function showEmpDetails(empid) {
  console.log(empid);
  try {
    const result = await $.ajax({
      url: "/Employee-Mybatis/employee/employeeInfo"
    });
    console.log(result);
    // 在这里处理请求返回的结果
  } catch (error) {
    console.error("请求出错：", error);
  }
}

最后小提示：调试时可以打开浏览器开发者工具（F12）的Network标签，实时查看请求的路径、状态和响应内容，能更快定位问题~

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