使用Ajax与JS跳转时，页面显示PHP源码而非图形界面求助

问题描述 #

我正在完成一个基于PHP（PDO）、JavaScript和Ajax的登录系统课程项目，目标是根据用户角色跳转至对应仪表盘。但登录后浏览器未显示预期的图形界面，而是直接展示了仪表盘的PHP源码，所有仪表盘均出现此问题。

相关代码 #

User-controller.php #

<?php
require_once("db.php");
require_once('class.php');
require_once('user-model.php');

session_start();

$response = array(); // 初始化$response变量

if (isset($_POST['user']) && isset($_POST['pass'])) {
   $mail = $_POST['user'];
   $contra = $_POST['pass'];

   $databaseCuatro = new Database();
   $conn = $databaseCuatro->getConnection();
   $sql = "SELECT email, contrasena, rol FROM usuarios WHERE email = :mail";
   $stmt = $conn->prepare($sql);
   $stmt->bindParam(':mail', $mail);
   $stmt->execute();

    $usuario = $stmt->fetch();

    if ($usuario && password_verify($contra, $usuario['contrasena'])) {
        // 验证通过，创建会话
        $_SESSION['loggedin'] = true;

        // 根据用户角色设置状态
        if ($usuario['rol'] === 1) {
            $_SESSION['admin'] = $usuario;
            $response['status'] = 1;
        } elseif ($usuario['rol'] === 2) {
            $_SESSION['userdem'] = $usuario;
            $response['status'] = 2;
        } elseif ($usuario['rol'] === 3) {
            $_SESSION['useroferente'] = $usuario;
            $response['status'] = 3;
        }
    } else {
        $conn = $databaseCuatro->getConnection();

        if (!$databaseCuatro->checkMail($mail)) {
            $response['status'] = 5; // 邮箱不存在
        } else {
            $response['status'] = 4; // 用户名或密码错误
        }
    }
}

// 发送JSON响应
header('Content-Type: application/json;');
echo json_encode($response);
?>

script-forms.js #

/* Ajax 登录逻辑 */
function loginData(event) {
 event.preventDefault(); // 阻止表单默认提交行为

var user = $('.input-user').val();
var pass = $('.input-pass').val();

  let data = {
    user: user,
    pass: pass
  }

  /* 通过Ajax验证登录 */
  $.ajax({
  url: "user-controller.php",
  method: "post",
  data: data,
  dataType: "json",
  success: function (response) {
      if (response.status === 1) {
              window.location.href = 'dashboard-admin.php';
          } else if (response.status === 2) {
             window.location.href = 'dashboard-demandante.php';
          } else if (response.status === 3) {
              window.location.href = 'dashboard-oferente.php';
          } else if (response.status === 4) {
              showMessage("用户名或密码错误！");
          } else if (response.status === 5) {
              showMessage("该账号不存在！");
          }
      },
        error: function (xhr, status, error) {
        console.log("Ajax请求错误: " + error);
      }
  });
}

仪表盘示例代码（dashboard-admin.php） #

<?php
include_once('db.php');
include_once('class.php');
include_once('user-controller.php');
include('header-admin.html');

if (isset($_SESSION['admin']) && $_SESSION['loggedin'] === true) {
    $admin = $_SESSION['admin'];
} else {
    header('Location: user-form.php');
    exit();
}

$database = new Database();
$conn = $database->getConnection();

// 注意：此处$mail变量未定义，需从会话中获取
$mail = $_SESSION['admin']['email'];
$sql = "SELECT * FROM admin WHERE MailA = :mail";
$stmt = $conn->prepare($sql);
$stmt->bindParam(':mail', $mail); 
$stmt->execute();
$adminData = $stmt->fetch(PDO::FETCH_ASSOC);

$conexion = null;
?>

<div class="container mt-4">
    <div class="row justify-content-center align-items-center">
        <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6">
            <div class="card text-center">
                <div class="card-header">
                    <h2> 欢迎管理员！</h2>
                </div>   
                <div class="card-body">
                    <div class="input-group justify-content-center align-items-center">
                    <form method="POST" action="dashboard-admin.php">
                        <button type="submit" class="btn btn-primary" name="btnPerfiles">查看资料</button>
                        <button type="submit" class="btn btn-danger" name="logoutAd">退出登录</button>
                        </form>
                    </div>
               </div>
            </div>
        </div>
    </div>
</div>

<?php
if (isset($_POST['btnPerfiles'])) {
    header('Location: admin-perfiles.php');
}

if (isset($_POST['logoutAd'])) {
    session_destroy(); // 先销毁会话再跳转
    header('Location: user-form.php');
    exit();
}
?>

问题截图 #

问题原因及解决方法 #

浏览器直接显示PHP源码的核心原因是服务器未正确解析PHP文件，将其当作纯文本返回。按以下步骤排查修复：

1. 确认服务器PHP环境正常

   • 本地环境（XAMPP/WAMP/LAMP）：确保Apache/Nginx服务已启动，PHP模块已加载。
   • 线上服务器：联系主机商确认PHP环境已配置启用。

2. 检查文件扩展名

   • 确保仪表盘文件后缀为.php，而非.html或.txt。

3. 验证服务器配置

   • Apache：检查httpd.conf，确保存在PHP解析规则：

     AddType application/x-httpd-php .php
     

   • Nginx：确保配置文件包含PHP-FPM解析规则：

     location ~ \.php$ {
         fastcgi_pass unix:/run/php/php7.4-fpm.sock; # 对应你的PHP-FPM路径
         fastcgi_index index.php;
         include fastcgi_params;
         fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
     }
     

4. 修复代码小问题

   • 仪表盘代码中$mail变量未定义，需从会话中获取用户邮箱；退出登录时需先销毁会话再跳转，避免会话残留。

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