使用Fetch API与PHP预处理语句实现安全高效的前后端数据交互

const promote = (id = false) => {
    // 确保ID存在
    if (id) {
        // 创建FormData对象，用于封装要发送的数据
        // FormData是提交表单数据的标准方式，支持键值对和文件上传
        let formData = new FormData();
        formData.set('id', id); // 将ID添加到FormData中，键为'id'

        // 发起Fetch请求
        fetch('promoteAccount.php', {
            method: 'post', // 指定HTTP方法为POST
            body: formData  // 将FormData对象作为请求体发送
        })
        .then(response => {
            // 检查HTTP响应状态码
            if (!response.ok) {
                // 如果响应状态码不是2xx，抛出错误
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            // 将响应体解析为文本
            return response.text();
        })
        .then(text => {
            // 请求成功并解析文本后的处理
            alert('成功晋升为QA'); // 用户提示
            console.log('服务器响应:', text); // 在控制台输出服务器响应
        })
        .catch(error => {
            // 捕获请求或处理过程中的任何错误
            console.error('请求失败:', error);
            alert('操作失败，请检查控制台。');
        });
    }
};

// 示例：如何触发promote函数
// 假设页面上有多个按钮，每个按钮的data-id属性存储了要晋升的员工ID
document.querySelectorAll('input[type="button"]').forEach(button => {
    button.addEventListener('click', (event) => {
        promote(event.target.dataset.id); // 从按钮的data-id属性获取ID并调用promote函数
    });
});

<?php
// 确保请求方法是POST，并且'id'参数不为空
if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_POST['id'])) {
    // 引入数据库连接文件
    require_once 'dbconnection.php'; // 假设此文件包含了$conn数据库连接对象

    $targetRole = 'QA'; // 目标角色
    $requiredRole = 'Receptionist'; // 只有当前角色为Receptionist的员工才能晋升

    // 使用预处理语句更新数据库
    // 问号 '?' 是参数占位符，可以有效防止SQL注入
    $sql = 'UPDATE `staff` SET `role` = ? WHERE `staffid` = ? AND `role` = ?';

    // 准备SQL语句
    $stmt = $conn->prepare($sql);

    // 检查语句是否准备成功
    if ($stmt === false) {
        http_response_code(500); // 服务器内部错误
        exit('数据库语句准备失败: ' . $conn->error);
    }

    // 绑定参数
    // 'sss' 表示三个参数的类型都是字符串 (string)
    // 注意：即使staffid在数据库中是INT类型，但通过$_POST获取的默认是字符串，
    // 在绑定时可以将其视为字符串，MySQL会自动处理类型转换。
    // 更严谨的做法是先将ID转换为整数类型（例如 (int)$_POST['id']），然后绑定'isi' (integer, string, integer)
    // 但此处为简化，保持'sss'，MySQL通常能正确处理。
    $stmt->bind_param('sss', $targetRole, $_POST['id'], $requiredRole);

    // 执行预处理语句
    $stmt->execute();

    // 获取受影响的行数，用于判断更新是否成功
    $affectedRows = $stmt->affected_rows;

    // 关闭语句和数据库连接
    $stmt->close();
    $conn->close();

    // 根据受影响的行数返回不同的响应
    if ($affectedRows == 1) {
        http_response_code(200); // 成功
        exit('Success');
    } else {
        // 如果没有行受影响，可能是ID不存在，或者角色不符合晋升条件
        http_response_code(200); // 仍然返回200，但消息表示失败
        exit('Failed: No matching record found or role not eligible for promotion.');
    }
} else {
    // 如果不是POST请求或缺少ID参数，返回400 Bad Request
    http_response_code(400);
    exit('Invalid Request: Missing ID or wrong request method.');
}
?>

CREATE TABLE `staff` (
  `staffid` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL DEFAULT '0',
  `role` varchar(50) NOT NULL DEFAULT '0',
  PRIMARY KEY (`staffid`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

-- 示例数据
INSERT INTO `staff` (`staffid`, `name`, `role`) VALUES
(1, 'Paula', 'QA'),
(2, 'Daniela', 'PA'),
(3, 'Susan', 'Cleaner'),
(4, 'Isobel', 'Receptionist'),
(5, 'Carrie', 'Team Leader'),
(6, 'Chantelle', 'IT support'),
(7, 'Helen', 'Receptionist');