点击按钮/链接后两页面间元素属性值传递方案（PHP+JS）

我来帮你搞定这个需求——要实现点击卡片按钮传递用户ID到详情页，最直接且符合常规逻辑的方式是通过URL参数传递，这样详情页就能直接用PHP获取ID并查询对应用户信息。下面是修改后的完整代码，以及关键步骤的解释：

修改后的用户列表页面（users.php） #

<?php include_once('connect.php'); 
$sql = "SELECT * FROM user"; 
$result = $conn->query($sql); 
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--========Personal style sheet link===========-->
<link rel="stylesheet" href="css/style.css">
<!--========Bootstrap cdn link============-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--==========Google fonts link==========-->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Oswald|Poppins|Roboto|Roboto+Condensed|Roboto+Mono&display=swap" rel="stylesheet">
<!-- font-family: 'Roboto Condensed', sans-serif; font-family: 'Montserrat', sans-serif; font-family: 'Roboto', sans-serif; font-family: 'Oswald', sans-serif; font-family: 'Roboto Mono', monospace; font-family: 'Poppins', sans-serif; -->
</head>
<body id="users-body">
<!--========Navigation bar==========-->
<div id="navbar" class="container">
<ul class="nav nav-pills justify-content-end">
<li class="nav-item"><a class="nav-link" href="/index.html">HOME</a></li>
<li class="nav-item"><a class="nav-link active" href="/users.php">VIEW ALL USERS</a></li>
</ul>
</div>

<!-- 直接用PHP循环生成卡片，比JS创建更简洁易维护 -->
<div class="container d-flex flex-wrap justify-content-center gap-3 mt-4">
<?php while($row = $result->fetch_assoc()){ ?>
    <div class="card" style="width: 18rem;">
        <img src="/images/dummy_user_image.png" class="card-img-top mx-auto mt-3" style="width: 10rem; height: 10rem; border-radius: 50%;" alt="user-image">
        <div class="card-body text-center">
            <h2 class="card-title"><?php echo $row['name'] ?></h2>
            <h6>ID: <span><?php echo $row['id'] ?></span></h6>
            <h6>Credit: <span><?php echo $row['credit'] ?></span></h6>
            <!-- 关键：把用户ID拼到跳转URL里 -->
            <a href="/details.php?id=<?php echo $row['id'] ?>" class="btn btn-success">VIEW DETAILS</a>
        </div>
    </div>
<?php } ?>
</div>

<!-- Bootstrap JS（可选，如需交互组件则添加） -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

详情页（details.php）：接收ID并查询用户信息 #

<?php include_once('connect.php');

// 获取URL中的用户ID，做好安全验证
if(isset($_GET['id']) && is_numeric($_GET['id'])){
    $user_id = intval($_GET['id']);
    // 用预处理语句防止SQL注入，务必重视安全
    $sql = "SELECT * FROM user WHERE id = ?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("i", $user_id);
    $stmt->execute();
    $result = $stmt->get_result();
    $user = $result->fetch_assoc();
} else {
    // ID无效则跳回用户列表
    header("Location: /users.php");
    exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
    <h1>User Details</h1>
    <?php if($user): ?>
        <div class="card">
            <div class="card-body">
                <img src="/images/dummy_user_image.png" style="width: 10rem; height: 10rem; border-radius: 50%;" alt="user-image">
                <h2><?php echo $user['name'] ?></h2>
                <p>ID: <?php echo $user['id'] ?></p>
                <p>Credit: <?php echo $user['credit'] ?></p>
                <!-- 可在此添加更多用户字段展示 -->
                <a href="/users.php" class="btn btn-secondary">Back to Users</a>
            </div>
        </div>
    <?php else: ?>
        <p>User not found!</p>
        <a href="/users.php" class="btn btn-secondary">Back to Users</a>
    <?php endif; ?>
</div>
</body>
</html>

关键修改说明 #

1. 替换JS动态创建为PHP循环生成卡片：
   原代码用JS在页面加载时创建卡片，不仅繁琐还不利于SEO。直接用PHP循环生成HTML更简洁易维护，同时能直接把用户ID拼到按钮跳转链接里。

2. URL参数传递用户ID：
   在按钮的href中添加?id=<?php echo $row['id'] ?>，点击按钮时ID会自动作为参数传递到详情页，这是最直观的页面间数据传递方式。

3. 详情页的安全处理：
   用isset($_GET['id'])检查参数是否存在，is_numeric()确保ID是数字，再用预处理语句执行SQL查询，彻底避免SQL注入风险，这是后端开发的基本安全规范。

4. 页面布局优化：
   用Bootstrap的d-flex flex-wrap justify-content-center gap-3实现卡片自适应排列，让页面布局更美观；同时修正了原代码中<header>标签的错误，改为标准的<head>标签。

如果你坚持要用原JS创建卡片的方式 #

可以修改按钮的点击事件来传递ID，替换原JS中按钮创建的部分：

// 原JS里创建btn的代码修改为：
btn.setAttribute("data-id", "<?php echo $row['id'] ?>");
btn.onclick = function(e){
    e.preventDefault();
    var userId = this.getAttribute("data-id");
    window.location.href = "/details.php?id=" + userId;
}

点击按钮时同样会把ID带到详情页，效果和PHP拼接一致。

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