异步MySQL更新操作：前端交互、后端安全与常见问题解决指南

<?php
    // ... (PHP 连接数据库及查询部分)
    $root = realpath(str_replace('\', '/', $_SERVER['DOCUMENT_ROOT']) );
    include ($root . '/insights/ss/onix.php'); // 假设 onix.php 包含了 $mysqli 数据库连接

    $result = mysqli_query($mysqli,"select * from notifications where seen = 0");
    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>
    /**
     * 处理点击事件，发送AJAX请求更新通知状态
     * @param {Event} e - 事件对象
     */
    function updateId(e) {
        e.stopPropagation(); // 阻止事件冒泡，防止与父元素的事件冲突

        // 根据点击的目标元素获取data-id属性
        // 如果点击的是span(x)本身，则其父节点是button，从button获取data-id
        // 如果点击的是button，则直接从button获取data-id
        let id = e.target !== e.currentTarget ? e.target.parentNode.dataset.id : e.target.dataset.id;

        // 使用Fetch API发送GET请求
        fetch('dismisssuccess.php?id=' + id)
            .then(response => {
                if (!response.ok) { // 检查HTTP响应状态码
                    throw new Error('Network response was not ok.');
                }
                return response.text(); // 将响应解析为文本
            })
            .then(text => console.log('后端响应:', text)) // 打印后端返回的文本到控制台
            .catch(error => console.error('Fetch请求失败:', error)); // 捕获并打印错误
    }

    // 为所有具有data-id属性的关闭按钮注册点击事件监听器
    // 确保在DOM加载完成后执行此代码
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('div[role="alert"] button[data-id]').forEach(button => {
            button.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'); // 包含数据库连接文件，假设其中定义了 $mysqli 对象

    // 1. 定义SQL查询模板，使用问号 (?) 作为参数的占位符
    $sql = 'UPDATE `notifications` SET `seen`=1, `seenby`=? WHERE `id`=?';

    // 2. 准备语句
    $stmt = $mysqli->prepare($sql);

    // 检查语句准备是否成功，如果失败则记录错误并终止
    if ($stmt === false) {
        error_log("Prepare failed: (" . $mysqli->errno . ") " . $mysqli->error);
        exit('Error: Failed to prepare statement.');
    }

    // 3. 绑定参数
    // 'ss' 表示绑定两个字符串类型参数
    // 第一个's' 对应 `seenby` (IP地址)，第二个's' 对应 `id`
    // 注意：尽管id通常是整数，但从GET参数获取的总是字符串，绑定为's'是安全的且更通用
    $stmt->bind_param('ss', $ip, $id);

    // 4. 执行语句
    $stmt->execute();

    // 5. 获取受影响的行数，判断操作是否成功
    $rowsAffected = $stmt->affected_rows;

    // 6. 关闭语句，释放资源
    $stmt->close();

    // 根据受影响行数返回成功或失败信息
    if ($rowsAffected > 0) {
        exit('Success'); // 更新成功
    } else {
        // 可能是ID不存在，或者更新值与原值相同导致affected_rows为0
        exit('Error: No rows updated or an error occurred.');
    }
} else {
    // 如果ID参数缺失
    exit('Error: ID parameter is missing.');
}
?>