Javascript 显示有关选择特定值的数据

我希望创建一个布局，从数据库中获取项目/名称列表，当我单击该列表中的名称/项目时，应显示创建为该名称/项目的信息 为此，我把这一页分成了两半。前半部分有一个数据列表，后半部分将显示特定数据的详细信息。视图应该是这样的：

我目前使用的代码是：

<div class="panel-body">
<?php
    $sql="SELECT * from `profile` ";
    $result= mysqli_query($con, $sql);
    if(mysqli_num_rows($result)>0)
    {
        while($row = mysqli_fetch_assoc($result))
        {
            echo $row['firstname'];
            echo "<br>";
        }
    }
?>
</div>

<div class="col-md-9">
    <section class="tile">
        <div class="table-responsive">
            //display data here after clicking on a particular name/item
        </div>
    </section>
</div>

//单击特定名称/项目后在此处显示数据

---

谁能告诉我如何将id从左视图传送到右视图，并根据它显示数据。

单击用户，获取用户id，并通过传递用户id调用ajax

这样就可以从数据库中获取数据，并将其显示在您希望显示的位置

为用户列表提供

class=“users”

$(document).on("click",".users",function(e){          
var url = "path to php file";
var id = "id of the user.";
     $.ajax({
        url:url,
        type:'POST',
        data:{id:id}
        success:function(data){          
            $('.table-responsive').html(data);
        }
     });
 e.preventDefault(); 
 return false;
});

---

您可以创建一个数据属性来标识单击了哪个用户，然后您可以将该id用于任何您想要的用途

while($row = mysqli_fetch_assoc($result))
                        {
                            echo"<div class='users' data-id='".$row['id']."'>";
                            echo $row['firstname'];
                            echo"</div>"; 
                        }

编辑：检查其工作状态（单击）

$（document）.on（“click”，“.users”，函数（e）{
警报（$（this.attr（“数据id”））；
});

用户123

//这里，我假设“id”是主键列。根据您的要求进行更改。
//单击特定名称/项目后在此处显示数据
$（'.ListId'）。单击（函数（）{
var Id=$（this.attr（'data-Id'）；
$.ajax（{url:“ajax\u ShowDetails.php？Id=“+Id，cache:false，success:function（result））{
$（“.ShowData”）.html（结果）；
}});
});

Ajax\u ShowDetails.php（创建一个任意名称的页面。但是，确保如果在此处更改页面名称，也必须更改
标记，因为两者都是相关的）。
在此页面中，通过“Id”获取所有详细信息

<?php

$Id=$_GET['Id'];

Through this '$Id', fetch all required details. It will automatically sit in 'ShowData' Div.

// Write Your Query

?>


从第一个视图使用
onclick
事件，通过ajax获取各自用户的数据，最后更新右视图的内容。在onclick事件上触发ajax调用…左侧的项目未被单击，id未被传递加载jquery库吗？如果有错误，请解释您正在执行的操作。您是否替换了文件名为.Anand Singh的“getInfo.php”，我没有收到任何错误，这些项没有被单击，因此当我单击左侧列表的第一项时，ajax无法执行，Ajax_ShowDetails.php正在运行，因此我得到了正确的id，但是如果我单击列表中的任何其他项目，脚本就不会运行ninghi@darcy。这是我的错误。请将1）
更改为
2）
$（'ListId'）。单击（function（）{
更改为
$（'.ListId'）。单击（function（）{
，因为
Id
是唯一的。我编辑了我的答案。请检查。上面的注释将让您知道要做的更改@darcy
<div class="panel-body">
    <?php
    $sql="SELECT * from `profile` ";
    $result= mysqli_query($con, $sql);
    if(mysqli_num_rows($result)>0)
    {
        while($row = mysqli_fetch_assoc($result))
        {?>
            // Here, i'm assuming 'id' as primary key column. Change according to your requirement.
            <span class='ListId' data-id="<?php echo $row['id'];?>">
                <?php echo $row['firstname'];?>
            </span> 
          <?php echo "<br>";?>
        <?php }
    }?>
</div>

<div class="col-md-9">
  <section class="tile">
    <div class="table-responsive">
        <div class='ShowData'>
            //display data here after clicking on a particular name/item
        </div>
    </div>
  </section>
</div>

<script>
    $('.ListId').click(function(){
        var Id=$(this).attr('data-id');
        $.ajax({url:"Ajax_ShowDetails.php?Id="+Id,cache:false,success:function(result){
            $(".ShowData").html(result);
        }});
    });
</script>

<?php

$Id=$_GET['Id'];

Through this '$Id', fetch all required details. It will automatically sit in 'ShowData' Div.

// Write Your Query

?>