如何实现onClick触发DeleteVendor函数删除数据库行数据

你混淆了PHP和JavaScript的运行机制，直接把PHP代码嵌在前端JS函数里是完全无法按预期运行的：

• PHP是服务端语言，代码在页面被发送到用户浏览器之前，就已经在服务器上执行完毕，根本不会等用户点击按钮、弹出确认框之后才触发
• JavaScript是运行在用户浏览器的客户端语言，只有用户触发对应操作（比如点击按钮）时才会执行
  你当前的写法会导致两个问题：一是页面加载时PHP就已经执行完删除逻辑，根本拿不到用户点击时传入的vendor_id参数；二是PHP执行输出的内容会打乱JS语法，直接导致JS函数报错失效，这就是你加了PHP代码段后功能停摆的直接原因。

另外你现有代码还有几个显性语法/逻辑错误：

• script标签属性书写错误：text='language/javascript"引号不配对，会导致JS块直接无法加载
• 删除按钮的onclick属性转义混乱，容易输出语法错误的HTML
• 原PHP删除逻辑里WHERE vendor_id = 'Delete'完全没有使用传入的供应商ID，就算执行也删不掉目标数据
• 删除按钮红色边框样式漏写#前缀，样式无法正常生效

不要把数据库操作逻辑写在前端JS中，单独拆分服务端删除接口，前端确认操作后请求接口完成删除即可。

1. 新建独立删除接口文件 delete_vendor.php #

该文件只负责处理删除的数据库逻辑，和前端页面代码分离：

<?php
// 参数合法性校验
if (!isset($_GET['vendor_id']) || !is_numeric($_GET['vendor_id'])) {
    exit("无效的供应商ID");
}
$vendor_id = intval($_GET['vendor_id']);

// 数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    exit("数据库连接失败: " . $conn->connect_error);
}

// 用预处理语句执行删除，防范SQL注入
$stmt = $conn->prepare("DELETE FROM vendors WHERE vendor_id = ?");
$stmt->bind_param("i", $vendor_id);
$stmt->execute();

$stmt->close();
$conn->close();

// 删除完成后跳回供应商列表页
header("Location: vendor_list.php"); // 替换成你自己的列表页地址
exit;
?>

2. 修正前端DeleteVendor函数 #

删掉JS函数里嵌套的所有PHP代码，用户确认后跳转到删除接口即可：

<script type="text/javascript">
function DeleteVendor(vendor_id, vendor_name)
{
  if (confirm("Are you sure you want to delete " + vendor_name))
  {
    window.location.href = `delete_vendor.php?vendor_id=${vendor_id}`;
  }
}
</script>

3. 修正按钮渲染代码 #

调整onclick属性的拼接逻辑，保证输出的HTML语法正确，同时修正样式错误：

<td style='text-align:center'>
<input style='border-color:#0000FF;background-color:#0000FF;color:#FFFFFF;height:25px;margin-right:15px' type='submit' onclick='EditVendor(<?= $row["vendor_id"] ?>)' value='Edit' />
<input style='border-color:#FF0000;background-color:#FF0000;color:#FFFFFF;height:25px' type='button' onclick="DeleteVendor(<?= $row["vendor_id"] ?>, '<?= addslashes($row["vendor_name"]) ?>')" value='Delete' />
</td>

• 所有数据库写入/删除操作都建议使用预处理语句，不要直接拼接SQL参数，避免SQL注入风险
• 不要在前端JS里直接写数据库连接、操作的逻辑，一是运行时机不对无法生效，二是会泄露数据库账号密码，有严重安全隐患
• 可以在删除接口里增加权限校验，避免未授权用户随意删除数据

内容的提问来源于stack exchange，提问作者Krazmad