PHP中暂停表单提交待RFID验证后恢复提交的实现问询

嘿，我来帮你搞定这个流程问题！你现在卡壳的核心点在于：RFID验证用的是普通表单提交，提交后页面会跳转到验证脚本，导致第一个表单的上下文丢失，自然没法触发它的提交。咱们改成AJAX异步验证，就能完美衔接整个流程了，一步步来：

1. 先修复RFID验证的PHP脚本（check_rfid.php） #

首先让PHP返回明确的JSON格式验证结果，这样前端能直接判断是否通过：

<?php
include 'database_con.php';

// 先检查是否有POST过来的RFID参数
if (!isset($_POST["rfid"])) {
    echo json_encode(['success' => false, 'message' => '缺少RFID参数']);
    exit;
}

$rfid = $_POST["rfid"];
open_connection();
global $conn;

$query = "SELECT Lehrer_RFID from Lehrer";
$result = $conn->query($query);
$rows = resultsToArry($result);
$result->free();

// 验证RFID是否有效
$isValid = verifyRFID($rfid, $rows);
// 返回JSON结果
echo json_encode(['success' => $isValid]);

function resultsToArry($result){
    $rows = array();
    // 只提取RFID值存入数组（原代码返回的是关联数组，会导致比对失败）
    while($row = $result->fetch_assoc()){
        $rows[] = $row['Lehrer_RFID'];
    }
    return $rows;
}

function verifyRFID($rfid, $rows){
    // 用in_array简化比对逻辑
    return in_array($rfid, $rows);
}
?>

注意：原代码里resultsToArry返回的是包含关联数组的集合，和字符串格式的$rfid比对永远不相等，这里我改成了只提取RFID值到数组里，确保验证逻辑正确。

2. 修改JavaScript逻辑，用AJAX提交RFID表单 #

把弹窗里的表单提交改成异步请求，这样页面不会跳转，验证通过后直接触发第一个表单的提交：

function getRFID(){
    "use strict";
    var modal = document.getElementById('rfidPopup');
    modal.style.display = "block";
    
    // 给RFID表单绑定提交事件（先移除旧监听避免重复绑定）
    const rfidForm = document.getElementById('rfid_field');
    rfidForm.removeEventListener('submit', handleRfidSubmit);
    rfidForm.addEventListener('submit', handleRfidSubmit);
    
    return false; // 阻止第一个表单的默认提交行为
}

function handleRfidSubmit(e){
    e.preventDefault(); // 阻止RFID表单的默认跳转提交
    const modal = document.getElementById('rfidPopup');
    const rfidInput = document.getElementById('rfid');
    const rfidValue = rfidInput.value.trim();
    
    // 先检查输入是否为空
    if(!rfidValue){
        alert('请输入RFID密码');
        return;
    }
    
    // 用fetch发送异步请求
    fetch('php/check_rfid.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `rfid=${encodeURIComponent(rfidValue)}`
    })
    .then(response => response.json())
    .then(data => {
        if(data.success){
            // 验证通过：关闭弹窗，提交第一个表单
            modal.style.display = "none";
            document.getElementById('klausur').submit();
        } else {
            // 验证失败：提示用户并清空输入框
            alert('RFID验证失败，请重新输入');
            rfidInput.value = '';
            rfidInput.focus();
        }
    })
    .catch(error => {
        console.error('请求出错:', error);
        alert('验证请求失败，请稍后重试');
    });
}

3. 可选：完善弹窗的关闭逻辑 #

如果你的弹窗有关闭按钮，可以给它加个事件，重置RFID表单的状态：

// 假设弹窗关闭按钮的id是closeModal
document.getElementById('closeModal').addEventListener('click', function(){
    document.getElementById('rfidPopup').style.display = "none";
    document.getElementById('rfid_field').reset();
});

为什么原代码无法实现？ #

原代码中，RFID表单是普通的POST提交，提交后页面会跳转到check_rfid.php，此时第一个表单的页面上下文已经丢失，自然没法触发它的提交。而使用AJAX异步请求，页面不会跳转，能完整保留第一个表单的状态，验证通过后直接调用submit()方法就能完成提交流程了。

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