用户未登录时如何通过jQuery autocomplete触发登录页跳转

方案1：自定义jQuery Autocomplete数据源（最灵活，推荐） #

• 后端调整：废弃原有的未登录直接触发header跳转的逻辑，改为返回标准化JSON结构
  未登录时返回示例：
  {"code": 401, "data": [], "msg": "登录状态已过期"}
  正常查询返回示例：
  {"code": 200, "data": [{"label":"搜索结果1","value":"1"}, {"label":"搜索结果2","value":"2"}]}
• 前端调整：把原有直接绑定接口地址的autocomplete配置，改为自定义source函数，自行发起AJAX请求并拦截结果，代码示例：

// 原代码逻辑：$( "#search-input" ).autocomplete({ source: "/api/search.php" });
// 替换为以下写法
$( "#search-input" ).autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "/api/search.php",
      dataType: "json",
      data: {
        term: request.term // 传递用户输入的搜索关键词
      },
      success: function(res) {
        // 拦截判断登录状态
        if (res.code === 401) {
          alert("登录状态已过期，请重新登录");
          window.location.href = "/login.php";
          return;
        }
        // 正常返回数据传给autocomplete组件渲染
        response(res.data);
      }
    })
  }
});

该方案无需修改全局AJAX配置，不会对页面其他请求产生影响，可针对性处理每个搜索框的逻辑

方案2：全局AJAX拦截（适配多搜索框场景，改造成本低） #

如果页面有大量绑定了autocomplete的搜索框，逐个修改配置成本高，可以直接全局拦截所有AJAX请求的返回结果，统一判断登录状态：

• 后端调整：可以选择同方案1返回带code的JSON，也可以直接在未登录时返回HTTP 401状态码，无需修改原有正常返回的结构，PHP代码示例：

// 后端未登录判断处添加
if (!$is_login) {
  http_response_code(401);
  exit();
}

• 前端调整：在公共JS文件中添加全局拦截代码即可，不需要修改每个autocomplete的原有配置：

// 拦截所有AJAX请求完成事件
$(document).ajaxComplete(function(event, xhr, settings) {
  // 若返回状态码为401，直接跳转登录页
  if (xhr.status === 401) {
    alert("登录状态已过期，请重新登录");
    window.location.href = "/login.php";
  }
  // 如果使用自定义code的判断方式，可解析返回JSON判断
  // try {
  //   const res = JSON.parse(xhr.responseText);
  //   if (res.code === 401) {
  //     // 执行跳转逻辑
  //   }
  // } catch(e) {}
});

该方案只需修改一处代码即可覆盖所有搜索框的场景，适合存量功能多的页面

注意事项 #

• 后端处理AJAX请求时，不要输出header('Location: xxx')跳转指令，AJAX请求不会触发页面跳转，只会把跳转后的页面内容作为返回结果接收，无法生效
• 如果使用全局拦截方案，注意排除登录页本身的AJAX请求，避免登录页也触发跳转逻辑

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