如何将按钮点击时的value值传递至其他PHP文件用于SQL查询

• 核心需求：点击按钮时获取按钮value属性内的lec_id参数，传递到chapters.php文件，作为该文件SQL查询的筛选条件。
• 现有实现问题：当前代码通过localStorage存储lec_id后跳转页面，但localStorage是浏览器端存储，PHP作为服务端语言在页面渲染阶段就执行完成，无法直接读取前端存储的该值，不能直接用于SQL查询。

现有index.php 代码 #

<?php
$con = mysqli_connect("localhost", "root", "", "lectureHub");
if(!$con) {
    die("Could not connect to MySql Server:" . mysqli_error());
}
$query = "select * from lectures";
$result = mysqli_query($con, $query);
if ($result->num_rows > 0) {
    // 循环输出每一行讲座数据对应的按钮
    while($row = $result->fetch_assoc()) {
        $lec_id = $row['lec_id'];
        $lec_name = $row['lec_name'];
        $lec_number = $row['lec_number'];
        $lec_views = $row['lec_views'];
        echo "<button id=linkButton name={$row['lec_name']} value={$row['lec_id']} type='button' class='btn btn-outline-primary lecture' onclick='buttonClicked(this)'>
                    {$row['lec_name']}  
                </button> ";
    }
} else {
    echo "0 results";
}
?>

现有按钮点击JS函数 #

function buttonClicked(btn) {
    btn.click_counter = (btn.click_counter || 0) + 1;
    document.getElementById("num_clicks_feedback").textContent = `btn ${btn.getAttribute('name')} has been clicked ${btn.click_counter} times`;
    localStorage.setItem("lecId", btn.getAttribute('value'));
    location.href = 'index.php?action=lec_hub/chapters';
}

现有chapters.php 代码 #

当前代码需要在SQL语句处传入获取到的lec_id作为筛选条件：

<html>
<head></head>
<body>
<?php
    echo "<p id='lecId'></p>";
    $con = mysqli_connect("localhost", "root", "", "lectureHub");
        if(!$con) {
            die("Could not connect to MySql Server:" . mysqli_error());
        }
    $query = "select * from chapters where <<此处需要传入lecId参数>> ";
?>
<script>
    function getValue(){
        var lecId = localStorage.getItem("lecId");
        document.getElementById("lecId").innerHTML = lecId;
        var resetValue= 0;
        localStorage.setItem("lecId", resetValue)
    }
    getValue()
</script>
</body>
</html>

采用URL查询参数传值，逻辑最简单，适配现有代码结构，不需要额外依赖。

1. 修改按钮点击JS函数：跳转时直接把lec_id拼接到目标地址的URL参数中，移除不必要的localStorage存储逻辑：

   function buttonClicked(btn) {
       btn.click_counter = (btn.click_counter || 0) + 1;
       document.getElementById("num_clicks_feedback").textContent = `btn ${btn.getAttribute('name')} has been clicked ${btn.click_counter} times`;
       const lecId = btn.getAttribute('value');
       // 跳转到chapters.php时携带lec_id参数
       location.href = `chapters.php?lec_id=${lecId}`;
   }
   

2. 修改chapters.php逻辑：通过PHP超全局变量$_GET获取URL中携带的lec_id，必须做参数合法性校验+SQL预处理，避免SQL注入风险：

   <html>
   <head></head>
   <body>
   <?php
   $con = mysqli_connect("localhost", "root", "", "lectureHub");
   if(!$con) {
       die("Could not connect to MySql Server:" . mysqli_error());
   }
   
   // 参数合法性校验
   if (!isset($_GET['lec_id']) || !is_numeric($_GET['lec_id'])) {
       die("无效的讲座ID参数");
   }
   $lec_id = intval($_GET['lec_id']);
   
   // 预处理SQL语句，绑定参数，防止SQL注入
   $stmt = mysqli_prepare($con, "SELECT * FROM chapters WHERE lec_id = ?");
   mysqli_stmt_bind_param($stmt, "i", $lec_id);
   mysqli_stmt_execute($stmt);
   $result = mysqli_stmt_get_result($stmt);
   
   // 后续处理查询到的章节数据即可
   while ($row = $result->fetch_assoc()) {
       // 自定义章节内容输出逻辑
   }
   ?>
   </body>
   </html>
   

注意：不要用前端JS读取localStorage再二次请求传值给PHP的方案，多一次冗余请求，逻辑链路长容易出问题。URL传参是页面间跳转传值最通用的实现方式，配合参数校验和预处理语句可以满足安全性要求。

内容的提问来源于stack exchange，提问作者Alheem Carreño