AJAX请求后页面意外重定向至接口地址，如何获取JSON数据？

根据你的描述，核心问题是AJAX请求执行后页面意外跳转到了请求URL，同时AJAX本身其实成功获取了数据（控制台能看到）。下面分几个方向排查和解决：

一、先排查JS端触发AJAX的方式，阻止默认跳转行为 #

这是最常见的原因：你触发AJAX的元素（比如按钮、链接）同时触发了浏览器的默认跳转行为（比如<a>标签的href跳转、表单的提交）。

• 如果是通过<a>标签触发：

  document.querySelector('#get-purchases-link').addEventListener('click', function(e) {
    // 阻止默认的链接跳转行为
    e.preventDefault();
    $.getJSON('/purchases/index', function(res) {
      console.log(res);
    });
  });
  

• 如果是通过表单提交触发：

  document.querySelector('#some-form').addEventListener('submit', function(e) {
    // 阻止表单默认提交跳转
    e.preventDefault();
    $.getJSON('/purchases/index', function(res) {
      console.log(res);
    });
  });
  

二、优化PHP端的响应输出，确保返回纯净的JSON #

你的PHP代码存在两个潜在问题：没有设置正确的响应头，以及输出后没有终止脚本执行，可能被框架后续逻辑干扰。

修改后的控制器代码：

public function index($purchases = []) {
    // 1. 设置正确的JSON响应头，告诉浏览器这是JSON数据
    header('Content-Type: application/json');
    // 确保没有缓存（可选，避免旧数据干扰）
    header('Cache-Control: no-cache, no-store, must-revalidate');
    
    $user = Auth::getUser();
    $userPurchases = User::userPurchases($user->id_db);
    $response = []; // 初始化响应数组，避免空值问题

    if (!empty($userPurchases)) {
        $response[] = $userPurchases[0]->user_id_db;
        foreach ($userPurchases as $item) {
            $response[] = $item->product_name_db;
        }
    }

    // 2. 输出JSON后立即终止脚本，避免框架后续的视图渲染或重定向
    echo json_encode($response);
    exit; // 用die()也可以，exit更规范
}

三、检查MVC框架的Auth中间件/路由规则 #

有些MVC框架的登录验证中间件会对所有请求进行重定向处理，但没有区分AJAX请求。需要确保中间件在处理AJAX请求时返回JSON错误，而不是重定向：

示例中间件逻辑：

public function handle($request) {
    if (!Auth::getUser()) {
        // 判断是否是AJAX请求
        $isAjax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && 
                  strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest';
        
        if ($isAjax) {
            header('Content-Type: application/json');
            echo json_encode(['error' => '请先登录']);
            exit;
        } else {
            // 普通请求重定向到登录页
            header('Location: /login');
            exit;
        }
    }
    return true;
}

四、添加AJAX错误处理，排查隐藏问题 #

给你的AJAX请求加上错误捕获，看看是否有隐藏的错误导致异常：

$.getJSON('/purchases/index')
  .done(function(res) {
    console.log('获取数据成功:', res);
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.error('请求失败:', textStatus);
    console.error('响应状态:', jqXHR.status);
    console.error('响应内容:', jqXHR.responseText);
  });

按照这个流程排查，应该能解决页面跳转的问题，让AJAX请求安静地在后台获取数据，而不会干扰当前页面。

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