PHP生成可点击div后，如何不刷新页面获取用户选中项的CodeID？

1. 改造前端HTML生成逻辑 #

修改PHP代码，把CodeID存入元素的data-*属性，移除a标签的跳转行为，让点击事件完全由JS控制：

while ($row = mysqli_fetch_assoc($result)) { 
    foreach( $row AS $key=>$value) 
    {
        if ($key == "CodeID"){
            $CodeID=$value;
        }
            
        if ($key == "EventName"){
            $count +=1;
            // 将CodeID存入data属性，移除跳转链接，改用JS处理点击
            echo "
            <div class='TheDiv' onclick='handleDivClick(this)' data-codeid='{$CodeID}' style='order:{$count}'>
                <p>{$value}</p>
            </div>
            ";
        }
    }
}

2. 编写JavaScript处理函数 #

先执行动画，再通过AJAX异步请求获取表单数据，避免页面刷新中断动画：

function handleDivClick(divElement) {
    // 优先执行Expand动画
    Expand();
    
    // 从data属性中取出当前的CodeID
    const codeId = divElement.dataset.codeid;
    
    // 发起AJAX请求获取表单内容
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'get_form.php?E=' + codeId, true);
    xhr.onload = function() {
        if (this.status === 200) {
            // 将返回的表单HTML插入到页面指定容器（需提前在页面中添加<div id="form-container"></div>）
            document.getElementById('form-container').innerHTML = this.responseText;
            
            // 若需要持久化CodeID到会话，可存入sessionStorage
            sessionStorage.setItem('selectedCodeID', codeId);
        }
    };
    xhr.send();
}

// 保留原有的Expand动画函数
function Expand() {
    // 你的动画实现逻辑
}

3. 后端AJAX接口（get_form.php） #

专门处理表单数据查询，返回渲染好的表单HTML，同时注意防护SQL注入：

<?php
session_start();
// 假设已存在数据库连接$SQLConnection

if(isset($_GET["E"])){
    // 强制转换为整数，避免SQL注入风险
    $ID = intval($_GET["E"]);
    $_SESSION['varname'] = $ID;
    
    // 使用预处理语句执行查询
    $query = "SELECT * FROM `qrcode` WHERE `CodeID` = ?";
    $stmt = $SQLConnection->prepare($query);
    $stmt->bind_param("i", $ID);
    $stmt->execute();
    $result = $stmt->get_result();
    
    $formContent = '';
    while ($row = mysqli_fetch_assoc($result)) {
        // 这里拼接你的表单HTML内容，示例：
        $formContent .= '<p class="data">' . htmlspecialchars($row['字段名']) . '</p>';
        // 补充更多表单元素...
    }
    
    echo $formContent;
}
?>

核心注意事项 #

• 彻底移除页面跳转逻辑，用AJAX异步请求替代，确保动画完整执行
• 必须对传入的CodeID做安全处理，使用预处理语句或类型转换防止SQL注入
• 页面中需要提前添加用于承载表单的容器（如id="form-container"的div）

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