PHP+JS二维码扫描程序：如何将扫描到的ID传递给PHP存入SQL

核心问题是你扫描到的ID只在前端JS里显示，没有通过表单提交给PHP。下面是具体的修改方案：

步骤1：添加隐藏输入框存储扫描到的ID #

在表单里加一个隐藏的<input>，用来保存扫描到的工人ID，这样提交表单时PHP就能拿到这个值：

<form method="POST">
    <!-- 原有的下拉选框等内容保留 -->
    <!-- 新增隐藏输入框 -->
    <input type="hidden" name="id_trabajador" id="id_trabajador" value="">
    <!-- 其他内容不变 -->

步骤2：修改JS的扫描成功函数，把ID存入输入框 #

修改onScanSuccess函数，除了显示结果，还要把扫描到的ID赋值给上面的隐藏输入框：

function onScanSuccess(qrCodeMessage) {
    document.getElementById('result').innerHTML = '<span class="result">id_trabajador = '+qrCodeMessage+'</span>';
    // 把扫描到的ID存入隐藏输入框
    document.getElementById('id_trabajador').value = qrCodeMessage;
}

步骤3：修复PHP的数据库操作，避免SQL注入 #

原代码直接拼接SQL有严重的注入风险，改用预处理语句，同时正确接收id_trabajador参数：

<?php
// 简化数据库连接，去掉重复的定义
$connect = mysqli_connect("localhost", "root", "", "control_index");
// 检查连接
if (!$connect) {
    die("连接失败: " . mysqli_connect_error());
}

$query_curso = "SELECT * FROM curso";
$result1 = mysqli_query($connect, $query_curso);

// 处理表单提交
if(isset($_POST['submit'])){
    // 检查是否同时拿到了课程ID和工人ID
    if(!empty($_POST['curso']) && !empty($_POST['id_trabajador'])){
        $id_curso = $_POST['curso'];
        $id_trabajador = $_POST['id_trabajador'];
        
        // 使用预处理语句防止SQL注入
        $sql = "INSERT INTO asistencia(ID_Trabajador, ID_Curso, Hora_De_Asistencia) VALUES (?, ?, CURRENT_TIME)";
        $stmt = mysqli_prepare($connect, $sql);
        mysqli_stmt_bind_param($stmt, "ss", $id_trabajador, $id_curso);
        
        if(mysqli_stmt_execute($stmt)){
            echo "<p>考勤记录已成功添加</p>";
        } else {
            echo "<p>添加失败: " . mysqli_error($connect) . "</p>";
        }
        mysqli_stmt_close($stmt);
    } else {
        echo "<p>请选择课程并扫描工人ID</p>";
    }
}
?>

完整修改后的代码 #

<html>
<body>
    <?php
    $connect = mysqli_connect("localhost", "root", "", "control_index");
    if (!$connect) {
        die("连接失败: " . mysqli_connect_error());
    }

    $query_curso = "SELECT * FROM curso";
    $result1 = mysqli_query($connect, $query_curso);
    ?>

    <form method="POST">
        <script src="html5-qrcode.min.js"></script>
        <h3>asistencia:</h3>
        <select name="curso">
            <option value="" disabled selected>Selecciona una curso</option>
            <?php while($row1 = mysqli_fetch_array($result1)):;?>
            <option value="<?php echo $row1[0];?>">
                <?php echo $row1[1];?>
            </option>
            <?php endwhile;?>
        </select>
        <!-- 新增隐藏输入框 -->
        <input type="hidden" name="id_trabajador" id="id_trabajador" value="">
        <p><a href="http://localhost/index_archivos/Menu_principal.html">Volver</a></p>

        <div class="row" align="center">
            <div class="col" align="center">
                <div style="width:500px;" id="reader"></div>
            </div>
            <div class="col" style="padding:30px;">
                <h4>SCAN RESULT</h4>
                <div id="result">Result Here</div>
            </div>
        </div>

        <script type="text/javascript">
            function onScanSuccess(qrCodeMessage) {
                document.getElementById('result').innerHTML = '<span class="result">id_trabajador = '+qrCodeMessage+'</span>';
                // 将扫描结果存入隐藏输入框
                document.getElementById('id_trabajador').value = qrCodeMessage;
            }

            function onScanError(errorMessage) {
                // 可以在这里添加错误提示，比如console.log(errorMessage)
            }

            var html5QrcodeScanner = new Html5QrcodeScanner(
                "reader", { fps: 10, qrbox: 250 });
            html5QrcodeScanner.render(onScanSuccess, onScanError);
        </script>

        <input type="submit" name="submit" value="提交考勤">
    </form>

    <?php mysqli_close($connect); ?>
</body>
</html>

关键说明 #

1. 隐藏输入框是前端传递数据到PHP的常用方式，表单提交时会把所有带name属性的输入值一起传给后台
2. 预处理语句(mysqli_prepare)能有效防止SQL注入，这是必须要做的安全优化
3. 添加了表单提交的检查，确保课程和工人ID都不为空才执行插入操作
4. 关闭了数据库连接，避免资源浪费

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