Fatal编程技术网
  • php/
  • Php 使用jQuery显示SQL数据

Php 使用jQuery显示SQL数据

php jquery

Php 使用jQuery显示SQL数据,php,jquery,Php,Jquery,在一个PHP文件中，我在数据库上运行一个查询，从插入到表中的每个新记录返回特定值。使用while循环，查询获取数据并在我创建的一个表中进行回显 现在，使用jQuery的ajax加载方法，setInterval为1秒，php文件中的数据以我希望的方式显示在我的页面上 然而，我现在遇到的问题是，如何在单击各个用户的“表”时显示有关其的更多详细信息。这些细节将通过jQuery的显示/隐藏显示。如何将记录的ID链接到我单击的内容，以便它显示有关该特定用户的详细信息 我创建了一个图表来解释我要做的事情，因

在一个PHP文件中，我在数据库上运行一个查询，从插入到表中的每个新记录返回特定值。使用while循环，查询获取数据并在我创建的一个表中进行回显

现在，使用jQuery的ajax加载方法，setInterval为1秒，php文件中的数据以我希望的方式显示在我的页面上

然而，我现在遇到的问题是，如何在单击各个用户的“表”时显示有关其的更多详细信息。这些细节将通过jQuery的显示/隐藏显示。如何将记录的ID链接到我单击的内容，以便它显示有关该特定用户的详细信息

我创建了一个图表来解释我要做的事情，因为我对PHP比较陌生，不确定我是否正确地解释了自己

container.php

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Show and Hide User Info</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <style>
  body {
    background-color: #000;
    color: #fff;
    font-family: tahoma, arial, verdana;
    font-size: 12px;
  }

  #users {
    background-color: #828282;
    width: 300px;
  }

  #userdetails {
    background-color: #828282;
    width: 300px;
    margin-top: 10px;
  }

  .user {
    padding: 5px;
    border-bottom: 1px solid white;
    width: 300px;
    background-color: #828282;
  }

  .user:hover {
    background-color: #282828;
    cursor: pointer;
  }

  #back:hover {
    background-color: #ffcc00;
    cursor: pointer;
    color: #000;
  }

  </style>

</head>

<body>

<div id="userlist"></div>

<div id="userdetails"></div>

<script>
setInterval(function(){
   $("#userlist").load("userlist.php");
}, 1000);
$('#userdetails').hide();
$(document).on("click",".user", function() {
    var data_id = $(this).attr("data-id");
      $.get("userdetails.php", {id: data_id}).done(function(data) {
      $('#userdetails').html(data);
      $('#userdetails').show();
      $('#userlist').hide();
  });
})
$(document).on("click","#back", function() {
  $('#userlist').show();
  $('#userdetails').hide();
});
 </script>


</body>
</html>

<?php

include 'dbh.php';

$result = $conn->query("SELECT * FROM users");

if ($result->num_rows > 0) {

  while ($row = $result->fetch_assoc()) {

    $color = array("ADMIN"=>"#ebc45b", "MOD"=>"#8fce61", "USER"=>"#9b9ed2");

?>

  <table data-id="<?php echo $row['id']; ?>" class="user">
    <tr>
      <td align="left"><?php echo $row['address']; ?></td>
      <td align="right"><?php echo $row['zip']; ?></td>
    </tr>
    <tr>
      <td align="left"><?php echo $row['city']; ?></td>
      <td align="right"><?php echo $row['state']; ?></td>
    </tr>
    <tr>
      <td align="left"><span style="color: <?php echo $color[$row['user_level']]; ?>"><?php echo $row['user_level']; ?></span></td>
      <td align="right">"member since..."</td>
    </tr>
  </table>

<?php
  }
}
?>

<?php

include 'dbh.php';

$result = $conn->query("SELECT * FROM users WHERE id=" . $_GET["id"]);

if ($result->num_rows > 0) {

  while ($row = $result->fetch_assoc()) {

?>
<div>
<span id="back">BACK</span>
</div>
<table data-id="<?php echo $row['id']; ?>" class="user">
<tr>
  <td align="left">First Name:</td>
  <td align="right"><?php echo $row['first_name']; ?></td>
</tr>
<tr>
  <td align="left">Last Name:</td>
  <td align="right"><?php echo $row['last_name']; ?></td>
</tr>
<tr>
  <td align="left">Age:</td>
  <td align="right"><?php echo $row['age']; ?></td>
<tr>
</tr>
  <td align="left">Sex:</td>
  <td align="right"><?php echo $row['sex']; ?></td>
</tr>
</table>

<?php
 }
}
?>



显示和隐藏用户信息
身体{
背景色：#000；
颜色：#fff；
字体系列：tahoma、arial、verdana；
字体大小：12px；
}
#使用者{
背景色:"828282 ;；
宽度：300px；
}
#用户详细信息{
背景色:"828282 ;；
宽度：300px；
边缘顶部：10px；
}
.用户{
填充物：5px；
边框底部：1px纯白；
宽度：300px；
背景色:"828282 ;；
}
.用户：悬停{
背景色:#282828 ;；
光标：指针；
}
#后退：悬停{
背景色：#ffcc00；
光标：指针；
颜色：#000；
}
setInterval（函数（）{
$（“#userlist”）.load（“userlist.php”）；
}, 1000);
$（'#userdetails'）.hide（）；
$（document）.on（“click”，“.user”，function（））{
var data_id=$（this.attr（“数据id”）；
$.get（“userdetails.php”，{id:data\u id}）.done（函数（数据）{
$（'#userdetails'）.html（数据）；
$（'#userdetails'）.show（）；
$（'#userlist'）.hide（）；
});
})
$（文档）。在（“单击”，“返回”，函数（）上）{
$（'#userlist'）.show（）；
$（'#userdetails'）.hide（）；
});
userlist.php

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Show and Hide User Info</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <style>
  body {
    background-color: #000;
    color: #fff;
    font-family: tahoma, arial, verdana;
    font-size: 12px;
  }

  #users {
    background-color: #828282;
    width: 300px;
  }

  #userdetails {
    background-color: #828282;
    width: 300px;
    margin-top: 10px;
  }

  .user {
    padding: 5px;
    border-bottom: 1px solid white;
    width: 300px;
    background-color: #828282;
  }

  .user:hover {
    background-color: #282828;
    cursor: pointer;
  }

  #back:hover {
    background-color: #ffcc00;
    cursor: pointer;
    color: #000;
  }

  </style>

</head>

<body>

<div id="userlist"></div>

<div id="userdetails"></div>

<script>
setInterval(function(){
   $("#userlist").load("userlist.php");
}, 1000);
$('#userdetails').hide();
$(document).on("click",".user", function() {
    var data_id = $(this).attr("data-id");
      $.get("userdetails.php", {id: data_id}).done(function(data) {
      $('#userdetails').html(data);
      $('#userdetails').show();
      $('#userlist').hide();
  });
})
$(document).on("click","#back", function() {
  $('#userlist').show();
  $('#userdetails').hide();
});
 </script>


</body>
</html>

<?php

include 'dbh.php';

$result = $conn->query("SELECT * FROM users");

if ($result->num_rows > 0) {

  while ($row = $result->fetch_assoc()) {

    $color = array("ADMIN"=>"#ebc45b", "MOD"=>"#8fce61", "USER"=>"#9b9ed2");

?>

  <table data-id="<?php echo $row['id']; ?>" class="user">
    <tr>
      <td align="left"><?php echo $row['address']; ?></td>
      <td align="right"><?php echo $row['zip']; ?></td>
    </tr>
    <tr>
      <td align="left"><?php echo $row['city']; ?></td>
      <td align="right"><?php echo $row['state']; ?></td>
    </tr>
    <tr>
      <td align="left"><span style="color: <?php echo $color[$row['user_level']]; ?>"><?php echo $row['user_level']; ?></span></td>
      <td align="right">"member since..."</td>
    </tr>
  </table>

<?php
  }
}
?>

<?php

include 'dbh.php';

$result = $conn->query("SELECT * FROM users WHERE id=" . $_GET["id"]);

if ($result->num_rows > 0) {

  while ($row = $result->fetch_assoc()) {

?>
<div>
<span id="back">BACK</span>
</div>
<table data-id="<?php echo $row['id']; ?>" class="user">
<tr>
  <td align="left">First Name:</td>
  <td align="right"><?php echo $row['first_name']; ?></td>
</tr>
<tr>
  <td align="left">Last Name:</td>
  <td align="right"><?php echo $row['last_name']; ?></td>
</tr>
<tr>
  <td align="left">Age:</td>
  <td align="right"><?php echo $row['age']; ?></td>
<tr>
</tr>
  <td align="left">Sex:</td>
  <td align="right"><?php echo $row['sex']; ?></td>
</tr>
</table>

<?php
 }
}
?>


“成员自……”
userdetails.php

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Show and Hide User Info</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <style>
  body {
    background-color: #000;
    color: #fff;
    font-family: tahoma, arial, verdana;
    font-size: 12px;
  }

  #users {
    background-color: #828282;
    width: 300px;
  }

  #userdetails {
    background-color: #828282;
    width: 300px;
    margin-top: 10px;
  }

  .user {
    padding: 5px;
    border-bottom: 1px solid white;
    width: 300px;
    background-color: #828282;
  }

  .user:hover {
    background-color: #282828;
    cursor: pointer;
  }

  #back:hover {
    background-color: #ffcc00;
    cursor: pointer;
    color: #000;
  }

  </style>

</head>

<body>

<div id="userlist"></div>

<div id="userdetails"></div>

<script>
setInterval(function(){
   $("#userlist").load("userlist.php");
}, 1000);
$('#userdetails').hide();
$(document).on("click",".user", function() {
    var data_id = $(this).attr("data-id");
      $.get("userdetails.php", {id: data_id}).done(function(data) {
      $('#userdetails').html(data);
      $('#userdetails').show();
      $('#userlist').hide();
  });
})
$(document).on("click","#back", function() {
  $('#userlist').show();
  $('#userdetails').hide();
});
 </script>


</body>
</html>

<?php

include 'dbh.php';

$result = $conn->query("SELECT * FROM users");

if ($result->num_rows > 0) {

  while ($row = $result->fetch_assoc()) {

    $color = array("ADMIN"=>"#ebc45b", "MOD"=>"#8fce61", "USER"=>"#9b9ed2");

?>

  <table data-id="<?php echo $row['id']; ?>" class="user">
    <tr>
      <td align="left"><?php echo $row['address']; ?></td>
      <td align="right"><?php echo $row['zip']; ?></td>
    </tr>
    <tr>
      <td align="left"><?php echo $row['city']; ?></td>
      <td align="right"><?php echo $row['state']; ?></td>
    </tr>
    <tr>
      <td align="left"><span style="color: <?php echo $color[$row['user_level']]; ?>"><?php echo $row['user_level']; ?></span></td>
      <td align="right">"member since..."</td>
    </tr>
  </table>

<?php
  }
}
?>

<?php

include 'dbh.php';

$result = $conn->query("SELECT * FROM users WHERE id=" . $_GET["id"]);

if ($result->num_rows > 0) {

  while ($row = $result->fetch_assoc()) {

?>
<div>
<span id="back">BACK</span>
</div>
<table data-id="<?php echo $row['id']; ?>" class="user">
<tr>
  <td align="left">First Name:</td>
  <td align="right"><?php echo $row['first_name']; ?></td>
</tr>
<tr>
  <td align="left">Last Name:</td>
  <td align="right"><?php echo $row['last_name']; ?></td>
</tr>
<tr>
  <td align="left">Age:</td>
  <td align="right"><?php echo $row['age']; ?></td>
<tr>
</tr>
  <td align="left">Sex:</td>
  <td align="right"><?php echo $row['sex']; ?></td>
</tr>
</table>

<?php
 }
}
?>


返回
姓氏：
年龄：
性别:
使用Java获取要显示数据的div的ID。使用XML函数打开电话文件。学校有很好的辅导

您可以向每个
添加
数据id
和
类
属性，这样您现在就可以为表的
类设置
onclick
处理程序

e、 g

现在，您的表标记将类似于：


"<table style='width: 295px; border-bottom: 1px solid white;' data-id='" . $row['user_unique_id'] . "' class='user_entry' >..."



现在，您可以在
GET\u user\u details.php
脚本中使用
$\u GET['user\u id']
来了解从数据库获取数据并返回漂亮转义html的唯一用户（别忘了您可能需要做一些事情，例如编码html字符以防止XXS和相关攻击）
我认为您的用户列表在一秒钟后加载，因此您的表单击可能不会触发。
你能试试这个吗


$(document).on("click",".user", function() {
    var data_id = $(this).attr("data-id");
      $.get("userdetails.php", {id: data_id}).done(function(data) {
      $('#userdetails').html(data);
      $('#userdetails').show();
      $('.user').hide();
  });
})



甚至您的userdetails的表类名也与userlist的表类名相同。
好的，我试着按照您的建议操作代码，但我可能做错了什么。我更新了上面的代码并更改了相关部分（我想）。我还包括了整个HTML代码，而不仅仅是jQuery代码片段。不过，我不确定在html中的何处放置jQuery代码段，以及如何将其链接到show/hide div。另外，jQuery代码段中有这么多空格是有原因的吗？一步一个脚印，你已经把代码很好地混合在一起了！好的，第一个.php文件是主UI文件。您可以使用它为这些用户显示
。这个文件将包含jQuery代码。第二个.php文件是您将使用jQuery加载调用的文件（即
$.get（…）
东西）。您不需要
$（'#userlist'）.load（'userdatamin.php'）
东西。显然，您需要对jQuery/JS做一些准备。对于我的jQuery代码片段中的“这么多”空格，我非常喜欢可读性，所以我自然会使用很多空格：）然后你在这行
“
上搞乱了一些html，因为你引用了
class='user'
。试着在Firebug或Chrome开发工具（Ctrl+I）中检查你的代码好的，在过去的几天里，我一直在做这件事，最后终于让它半途而废，多亏了你和我的编程伙伴。正如你所看到的，我们添加了
WHERE id=“$_在select语句中获取[“id”]
以获取id。我在原始帖子中包含了一个指向我的站点的链接，并附带了一个工作演示。现在的问题是让users div每秒刷新一次，这样任何新的数据库插入都会自动进行，同时在单击用户后在同一空间中显示用户详细信息。@glokul Fantastic！现在，您所要做的就是创建一个新的纯php脚本（比如name if
fetcher.php
），该脚本只包含显示用户的php代码（您的
users.php
脚本中的代码片段，以
开头的部分，而不是一堆
if
语句，为什么不使用关联数组来查找基于角色的自定义项？好主意，我完全支持做同样事情的较短代码。我是一个业余爱好者，但是，这很接近吗？
$color=array（“ADMIN”=>“#ebc45b”，“MOD”=>“#8fce61”，“USER”=>“#9b9ed2”）
这是完全正确的。您也可以稍后将其提取出来，并根据自己的判断将其推送到配置文件，甚至数据库。只需避免硬编码即可提供这些选项。像
$color[$row['USER\u level']一样使用它
那样的话。谢谢！！这很有效！！我也不得不使用
setInterval
。