如何使用AJAX和PHP基于管理员或普通用户登录来更改表头及其内容？

// 监听登录按钮的点击事件
document.getElementById("loginButton").addEventListener("click", function() {
  // 获取用户名和密码输入框的值
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  
  // 创建AJAX请求
  var xhr = new XMLHttpRequest();
  
  // 配置AJAX请求
  xhr.open("POST", "login.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  
  // 处理AJAX响应
  xhr.onload = function() {
    if (xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      if (response.isAdmin) {
        // 如果是管理员，则跳转到表格页面
        window.location.href = "table.html";
      } else {
        // 如果是普通用户，则给出相应提示
        alert("您没有权限更改表头");
      }
    } else {
      // 处理错误情况
      alert("登录失败，请稍后再试");
    }
  };
  
  // 发送AJAX请求
  xhr.send("username=" + username + "&password=" + password);
});

<?php
// 获取POST请求中的用户名和密码
$username = $_POST["username"];
$password = $_POST["password"];

// 假设这里进行身份验证，验证成功则返回isAdmin字段为true，否则为false
$isAuthenticated = // 验证用户身份的代码

// 返回JSON格式的响应
header("Content-Type: application/json");
echo json_encode(["isAdmin" => $isAuthenticated]);
?>

// 监听表头更改按钮的点击事件
document.getElementById("changeHeaderButton").addEventListener("click", function() {
  // 获取新的表头名称
  var newHeader = document.getElementById("newHeader").value;
  
  // 创建AJAX请求
  var xhr = new XMLHttpRequest();
  
  // 配置AJAX请求
  xhr.open("POST", "update_header.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  
  // 处理AJAX响应
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 处理成功情况
      alert("表头已更改");
    } else {
      // 处理错误情况
      alert("更改表头失败，请稍后再试");
    }
  };
  
  // 发送AJAX请求
  xhr.send("newHeader=" + newHeader);
});

<?php
// 获取POST请求中的新表头名称
$newHeader = $_POST["newHeader"];

// 假设这里进行表头更新操作，更新成功则返回HTTP状态码200，否则返回错误状态码
$isUpdated = // 表头更新的代码

if ($isUpdated) {
  http_response_code(200);
} else {
  // 返回错误状态码
  http_response_code(500);
}
?>