如何通过JS点击事件将PHP生成的参数传递到另一个PHP文件

1. PHP渲染优化（推荐） #

直接用数字作为DOM的id不符合HTML规范，建议改用data-*自定义属性存储帖子id，避免兼容问题和命名冲突，渲染代码示例：

<?php
// 数据库连接
$conn = mysqli_connect('localhost', '你的数据库用户名', '你的数据库密码', '你的数据库名');
if (!$conn) {
    die("连接失败: " . mysqli_connect_error());
}

// 查询posts表
$sql = "SELECT id, title FROM posts";
$result = mysqli_query($conn, $sql);

// 循环渲染div
if (mysqli_num_rows($result) > 0) {
    while($row = mysqli_fetch_assoc($result)) {
        // htmlspecialchars转义避免XSS漏洞
        echo '<div class="question" data-post-id="'. $row['id'] .'">'. htmlspecialchars($row['title']) .'</div>';
    }
}
mysqli_close($conn);
?>

如果你不想修改现有渲染逻辑，仍然用DOM id存储帖子id也可以，后续JS部分调整取值方式即可。

2. JS绑定点击事件实现参数传递 #

方案1：页面跳转到question.php（GET传参） #

适合需要打开新页面展示帖子详情的场景：

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有question类元素
    const questionList = document.querySelectorAll('.question');
    
    questionList.forEach(item => {
        // 绑定点击事件
        item.addEventListener('click', function() {
            // 从data属性取id，如果你用DOM id存的话改成 const postId = this.id
            const postId = this.dataset.postId;
            // 跳转到question.php并携带id参数
            window.location.href = `question.php?id=${postId}`;
        });
        // 可选：添加鼠标悬浮手势，提升用户体验
        item.style.cursor = 'pointer';
    });
});

在question.php中接收参数的代码：

<?php
// intval转整数避免SQL注入风险
$postId = isset($_GET['id']) ? intval($_GET['id']) : 0;
// 后续可根据$postId查询对应帖子的详细内容
?>

方案2：异步请求question.php（无跳转） #

适合需要在当前页面加载详情的场景：

document.addEventListener('DOMContentLoaded', function() {
    const questionList = document.querySelectorAll('.question');
    
    questionList.forEach(item => {
        item.addEventListener('click', async function() {
            const postId = this.dataset.postId;
            try {
                const res = await fetch('question.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `id=${postId}`
                });
                const result = await res.text();
                // 这里自定义处理返回的内容，比如插入到页面指定位置
                console.log(result);
            } catch (err) {
                console.error('请求出错：', err);
            }
        });
        item.style.cursor = 'pointer';
    });
});

对应的question.php接收参数代码：

<?php
$postId = isset($_POST['id']) ? intval($_POST['id']) : 0;
// 处理逻辑后返回对应内容即可
?>

注意事项 #

• 输出用户生成内容（比如帖子标题）时必须用htmlspecialchars()转义，避免XSS攻击
• 接收id参数后要用intval()转为整数，后续数据库查询优先使用预处理语句，避免SQL注入风险
• 自定义数据优先使用data-*属性存储，比直接占用DOM id更规范，也能避免id重复冲突

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