如何绑定输入按钮至需执行PHP的<li>？站点文件删除功能异常排查

你遇到的核心问题是前后端运行时机的差异，以及对表单提交数据规则的误解，咱们一步步拆解：

为什么原来的方法行不通？ #

1. 前后端完全分离：PHP是服务端代码，在页面渲染到浏览器之前就已经执行完毕了；而jQuery是前端代码，只有页面加载完成后在用户浏览器里才会运行。你点击按钮修改<li>的name属性，这个变化只存在于浏览器的DOM中，根本不会被服务端的PHP接收到——PHP早就把HTML输出完了，它看不到你后续修改的DOM。
2. 表单提交规则：表单提交时，只有**表单控件（input、select、textarea等）**的name和value才会被打包成POST/GET数据发送给服务端。<li>是普通的HTML元素，哪怕你给它加了name属性，浏览器也不会把它的属性值包含在提交的数据里。

你的输入框能正常工作，正是因为输入框是标准的表单控件，它的name和用户输入的value会被正确提交给PHP。

两种可行的解决方案 #

方案1：用隐藏输入框（最简单，无需修改jQuery） #

直接在每个<li>里添加一个隐藏的input，把文件名存在它的value里，这样点击按钮提交表单时，这个隐藏输入框的name和value就会被自动发送给PHP：

修改你的echo代码：

echo "<li>{$filename[$i]}
          <input type='hidden' name='remove_file' value='{$filename[$i]}'>
          <input type='submit' name='destroyFile' value='Remove File'>
      </li>";

这样完全不需要jQuery，点击按钮后，PHP就能通过$_POST["remove_file"]拿到对应的文件名，和你之前的输入框逻辑一致，而且更安全（避免用户手动输入错误文件名）。

方案2：用AJAX异步提交（更友好，无页面刷新） #

如果不想刷新页面，可以给按钮添加data-*属性存储文件名，然后用jQuery的AJAX发送请求：

首先修改echo代码，给按钮加类名和data属性：

echo "<li>{$filename[$i]}
          <input type='submit' class='remove-btn' data-filename='{$filename[$i]}' value='Remove File'>
      </li>";

然后替换你的jQuery代码：

$(".remove-btn").on("click", function(e) {
    e.preventDefault(); // 阻止默认表单提交
    const filename = $(this).data('filename'); // 从data属性获取文件名
    
    // 发送POST请求给当前页面的PHP
    $.post(window.location.href, {
        destroyFile: true,
        remove_file: filename
    }, function(response) {
        // 请求成功后的操作，比如删除当前<li>
        $(this).closest('li').remove();
        alert('文件已成功删除');
    }.bind(this)); // 绑定this，确保在回调里能找到当前按钮
});

这种方式用户体验更好，不需要刷新整个页面，而且逻辑更清晰。

额外安全提醒 #

注意你的PHP代码里有SQL注入风险！直接把$filename拼进SQL语句是不安全的，建议改用预处理语句：

if(isset($_POST["destroyFile"])) { 
    $filename = $_POST["remove_file"]; 
    $file = 'views/home/added_files/'.$filename.'.php'; 
    // 预处理语句防止SQL注入
    $stmt = $this->query("DELETE FROM page_context WHERE file_name=?");
    $stmt->bind_param("s", $filename);
    $stmt->execute();
    $stmt->close();
    if(file_exists($file)) { // 先判断文件存在再删除，避免报错
        unlink($file);
    }
}

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