AJAX与MySQL安全更新实践：利用PHP预处理语句和Fetch API

<?php
    // ... PHP 数据库查询及结果处理 ...

    if ($result){
        if($result->num_rows) {
            while($row = mysqli_fetch_assoc($result)){
?>
<div class='alert alert-success alert-dismissible' role='alert' style='margin-left:-12px;'>
    <button type="button" class="close" data-id="<?=$row['id'];?>" data-dismiss="alert" aria-label="Close" style="float:left!important; border:0; background:none;">
        <span aria-hidden="true">&times;</span>
    </button>
    <strong>
        <span class="text-success" style="margin-top:-50px;">
            <i class='fa fa-check'></i>
               文件已成功移动
        </span>
    </strong>
    <br>
    请按X按钮确认已阅读此消息
</div>
<?php
           }
        }
    }
?>

<script>
    /**
     * 处理通知关闭按钮点击事件
     * @param {Event} e - 事件对象
     */
    function updateId(e){
        // 阻止事件冒泡，防止影响父级元素的行为
        e.stopPropagation();

        // 获取按钮上存储的ID。
        // e.target可能是点击到的子元素（如<span>），e.currentTarget是实际绑定事件的元素（<button>）。
        // 如果点击的是子元素，则通过parentNode获取父元素的数据属性。
        let id = e.target.dataset.id || e.target.parentNode.dataset.id;

        // 使用Fetch API发送异步请求
        fetch( 'dismisssuccess.php?id=' + id )
            .then(response => response.text()) // 将响应解析为文本
            .then(text => console.log(text))   // 打印服务器响应到控制台
            .catch(error => console.error('AJAX请求失败:', error)); // 捕获并处理错误
    }

    // 页面加载完成后，为所有具有data-id属性的关闭按钮添加点击事件监听器
    document.querySelectorAll('div[role="alert"] button[data-id]').forEach(bttn => {
        bttn.addEventListener('click', updateId);
    });
</script>

<?php
// 检查ID参数是否存在且非空
if( !empty( $_GET['id'] ) ){

    $id = $_GET['id'];
    $ip = getenv('REMOTE_ADDR'); // 获取客户端IP地址

    // 引入数据库连接文件
    $root = realpath(str_replace('\', '/', $_SERVER['DOCUMENT_ROOT']) );
    include ($root . '/insights/ss/onix.php');

    // 准备SQL查询语句，使用问号 (?) 作为参数占位符
    $sql = 'UPDATE `notifications` SET `seen`=1, `seenby`=? WHERE `id`=?';

    // 创建预处理语句对象
    $stmt = $mysqli->prepare($sql);

    // 检查预处理是否成功
    if ($stmt === false) {
        // 预处理失败，输出错误信息
        exit('数据库预处理失败: ' . $mysqli->error);
    }

    // 绑定参数：'ss' 表示两个参数都是字符串类型
    // 第一个 's' 对应 $ip，第二个 's' 对应 $id
    $stmt->bind_param('ss', $ip, $id);

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

    // 获取受影响的行数
    $rows = $stmt->affected_rows;

    // 关闭预处理语句
    $stmt->close();

    // 根据受影响的行数返回结果
    exit( $rows > 0 ? 'Success' : 'There is some error' );
} else {
    // 如果ID参数缺失或为空，返回错误信息
    exit('缺少必要的ID参数。');
}
?>