PHP结合JavaScript实现点击超链接执行删除确认操作

周予安

发布时间：2026-10-14| 6人浏览过

原创

在前端页面中为数据库数据提供"删除"功能时，为避免误删，通常需要用户二次确认。本示例演示如何利用PHP获取数据、JavaScript弹出确认框以及PHP接收参数使用PDO执行DELETE操作的完整流程。

实现目标

当用户在网页上点击某条数据的"删除"链接时：
1. 前端弹出确认对话框（Confirm）。
2. 若用户选择"确定"，则向服务器发起请求删除该条数据。
3. 后端接收ID并使用安全的PDO方式删除数据库记录。

准备条件

已配置好MySQL数据库及PHP运行环境。
掌握基本的HTML结构、PHP语法及JavaScript基础。

第1步：连接数据库并查询数据

目的：从数据库中读取需要展示的数据列表，并为每条数据生成带有删除功能的超链接。

入口：包含查询逻辑的PHP文件顶部或初始化区域。

动作：

定义数据库连接参数（主机名、用户名、密码、库名）。
创建 PDO 实例建立连接。
使用 prepare 和 execute 方法查询数据表（如 tb_pdo_mysql）。
遍历结果集，在HTML表格中输出字段，并在最后一列插入删除链接。

<?php
$dbms='mysql';
$host='localhost';
$dbName='db_database19';
$user='root';
$pass='root';
$dsn="$dbms:host=$host;dbname=$dbName";

try {
    $pdo = new PDO($dsn, $user, $pass);
    $query="select * from tb_pdo_mysql";
    $result=$pdo->prepare($query);
    $result->execute();
    
    while($res=$result->fetch(PDO::FETCH_ASSOC)){
        ?>
        <tr>
            <td><?php echo $res['id'];?></td>
            <td><?php echo $res['pdo_type'];?></td>
            <td><?php echo $res['database_name'];?></td>
            <td><?php echo $res['dates'];?></td>
            <!-- 关键点：链接调用del()函数，传递记录ID -->
            <td><a href="javascript:del(<?php echo $res['id']?>)">删除</a></td>
        </tr>
        <?php 
    }
} catch (PDOException $e) {
    die("Error!: " . $e->getMessage() . "<br/>");
}
?>

第2步：添加JavaScript确认逻辑

目的：拦截删除链接的默认跳转行为，先由用户确认是否执行删除。

入口：页面的 <head> 或 <body> 底部。

动作：定义 del(_id) 函数，使用 confirm() 弹出确认框。若返回 true，则修改当前窗口URL，携带 conn_id 参数指向自身（或其他处理页面），从而触发后端PHP逻辑。

<script>
    function del(_id) {
        if (confirm("确认删除此条数据吗？")) {
            // 用户确认后，将页面重定向到带参数的当前页
            window.location.href="index.php?conn_id="+_id;
        }
    }
</script>

第3步：后端接收请求并执行删除

目的：安全地处理传入的ID并删除数据库中的对应记录。

入口：PHP脚本的最顶端，必须在任何HTML输出之前执行，以免引起Header已发送错误。

动作：

检查 GET 参数 $_GET['conn_id'] 是否存在。
重新连接数据库（或复用前文的 $pdo 对象）。
构建 DELETE 语句，使用占位符 :id 以防SQL注入。
绑定参数并执行。

<?php
if(@$_GET['conn_id']!=""){
    $dbms='mysql';
    $host='localhost';
    $dbName='db_database19';
    $user='root';
    $pass='root';
    $dsn="$dbms:host=$host;dbname=$dbName";
    
    try {
        $pdo = new PDO($dsn, $user, $pass);
        $pdo->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
        
        // 使用预处理语句防止SQL注入
        $query="delete from tb_pdo_mysql where Id=:id";
        $result=$pdo->prepare($query); 
        $result->bindParam(':id', $_GET['conn_id']);
        $result->execute();
        
        // 可选：删除成功后可刷新页面或提示成功
        echo "<script>alert('删除成功');location.href='index.php';</script>";
    } catch (PDOException $e) {
        echo 'PDO Exception Caught.';
        echo 'Error with the database:<br/>';
        echo 'SQL Query: '.$query;
        echo '<pre>';
        echo "Error: " . $e->getMessage(). "<br/>"; 
        echo "Code: " . $e->getCode(). "<br/>";
        echo "File: " . $e->getFile(). "<br/>";
        echo "Line: " . $e->getLine(). "<br/>";
        echo "Trace: " . $e->getTraceAsString(). "<br/>";
        echo '</pre>';
    }
}
?>