利用Fetch API与PHP实现安全高效的异步数据交互与数据库更新

const promote = (id = false) => {
    if (id) {
        // 创建FormData对象，用于封装要发送的数据
        // FormData对象特别适合发送表单数据，或需要模拟表单提交的场景
        let fd = new FormData();
        fd.set('id', id); // 设置名为'id'的字段及其值

        // 发起Fetch请求
        fetch('promoteAccount.php', {
            method: 'post', // 指定请求方法为POST
            body: fd         // 将FormData对象作为请求体发送
        })
        .then(response => {
            // 检查HTTP响应状态码
            if (!response.ok) {
                // 如果响应状态码不是2xx，抛出错误
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.text(); // 解析响应体为文本
        })
        .then(text => {
            // 请求成功并解析文本后执行
            alert('Promoted to QA successfully'); // 给予用户反馈
            console.log(text); // 打印服务器返回的响应内容
        })
        .catch(error => {
            // 捕获请求或解析过程中发生的任何错误
            console.error('There was a problem with the fetch operation:', error);
            alert('Operation failed: ' + error.message);
        });
    }
};

// 示例：如何绑定事件以触发promote函数
document.querySelectorAll('input[type="button"]').forEach(bttn => bttn.addEventListener('click', (e) => {
    // 从按钮的data-id属性获取ID
    promote(e.target.dataset.id);
}));

<?php
// 检查请求方法是否为POST，并且POST数据中包含'id'
if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_POST['id'])) {

    // 引入数据库连接文件
    // 实际项目中应根据您的文件结构调整路径
    require_once 'dbconnection.php';

    $code = 'QA'; // 目标角色
    $role = 'Receptionist'; // 原始角色，作为更新条件

    // 构建SQL更新语句，使用占位符 '?' 代替实际值
    // 这样可以分离SQL逻辑和数据，防止SQL注入
    $sql = 'UPDATE `staff` SET `role`=? WHERE `staffid`=? AND `role`=?';

    // 准备SQL语句
    // prepare()方法返回一个mysqli_stmt对象
    if ($stmt = $conn->prepare($sql)) {
        // 绑定参数
        // 'sss' 表示三个参数都是字符串类型 (string)
        // 顺序与SQL语句中的占位符对应
        $stmt->bind_param('sss', $code, $_POST['id'], $role);

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

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

        // 关闭语句
        $stmt->close();
        // 关闭数据库连接（可选，取决于您的应用生命周期）
        $conn->close();

        // 设置HTTP响应状态码为200 (OK)
        http_response_code(200);
        // 根据受影响行数返回成功或失败信息
        exit($result == 1 ? 'Success' : 'Failed');
    } else {
        // 准备语句失败，可能是SQL语法错误或连接问题
        http_response_code(500); // Internal Server Error
        exit('Database statement preparation failed.');
    }
}

// 如果不是POST请求或缺少ID参数，返回404或400错误
http_response_code(400); // Bad Request
exit('Invalid request method or missing parameters.');
?>

+---------+------------------+------+-----+---------+----------------+
| Field   | Type             | Null | Key | Default | Extra          |
+---------+------------------+------+-----+---------+----------------+
| staffid | int(10) unsigned | NO   | PRI | NULL    | auto_increment |
| name    | varchar(50)      | NO   |     | 0       |                |
| role    | varchar(50)      | NO   |     | 0       |                |
+---------+------------------+------+-----+---------+----------------+

-- 示例数据
+---------+-----------+--------------+
| staffid | name      | role         |
+---------+-----------+--------------+
|       1 | Paula     | QA           |
|       2 | Daniela   | PA           |
|       3 | Susan     | Cleaner      |
|       4 | Isobel    | Receptionist |
|       5 | Carrie    | Team Leader  |
|       6 | Chantelle | IT support   |
|       7 | Helen     | Receptionist |
+---------+-----------+--------------+