使用来自 mySQL 的数据填充 HTML DIV答案

【问题标题】：Populate HTML DIV with data from mySQL使用来自 mySQL 的数据填充 HTML DIV
【发布时间】：2019-05-19 07:33:53
【问题描述】：

我有一个 MySQL DB "dorav3" 和一个表 "dtab1"，下面的列包含名片信息。我还有一个 php 脚本和 HTML 页面，用于在 HTML 表中显示数据库数据。

我的问题是我如何才能从仅填充表格到填充下面的翻转卡片

我目前为桌子做 <td><?php echo $row1[0];?></td>

我应该为翻转卡做类似的事情吗？

<body>
<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2><?php echo $row1[0];?></h2>
       <h2><?php echo $row1[1];?></h2>
    </div>
    <div class="flip-box-back">
      <h4><?php echo $row1[2];?></h4>
      <h4><?php echo $row1[3];?></h4>
      <h4><?php echo $row1[4];?></h4>
    </div>
  </div>
</div>

我真的被困住了！

+--------------------+---------+------+-----+---------+----------------+
| Field              | Type    | Null | Key | Default | Extra          |
+--------------------+---------+------+-----+---------+----------------+
| Title              | text    | YES  |     | NULL    |                |
| Name               | text    | YES  |     | NULL    |                |
| Email              | text    | YES  |     | NULL    |                |
| Website            | text    | YES  |     | NULL    |                |
| Contact            | text    | YES  |     | NULL    |                |
| id                 | int(11) | NO   | PRI | NULL    | auto_increment |
 ----------------------------------------------------------------------

PHP

<?php

// php populate html table from mysql database

$hostname = "localhost";
$username = "xxx";
$password = "xxx";
$databaseName = "dorav3";

// connect to mysql
$connect = mysqli_connect($hostname, $username, $password, $databaseName);

// mysql select query

$query = "SELECT * FROM `dtab1";


// result for method one
$result1 = mysqli_query($connect, $query);

// result for method two 
$result2 = mysqli_query($connect, $query);

$dataRow = "";

while($row2 = mysqli_fetch_array($result2))
{
    $dataRow = $dataRow."<td>$row2[0]</td><td>$row2[1]</td><td>$row2[2]</td><td>$row2[3]</td><td>$row2[4]</td><td>$row2[5]</td><td>$row2[6]</td><td>$row2[7]</td><td>$row2[8]</td><td>$row2[9]</td><td>$row2[10]</td><td>$row2[11]</td><td>$row2[12]</td><td>$row2[13]</td><td>$row2[14]</td><td>$row2[15]</td>";
}

?>

HTML 填充表格

    <body>
        <table>
             <tr>
                <th>Title</th>
                <th>Name</th>
                <th>Email</th>
                <th>Website</th>
                <th>Contact</th>
            </tr>
            </table>
              <?php while($row1 = mysqli_fetch_array($result1)):;?>
            <table>
            <tr>
                <td><?php echo $row1[0];?></td>
                <td><?php echo $row1[1];?></td>
                <td><?php echo $row1[2];?></td>
                <td><?php echo $row1[3];?></td>
                <td><?php echo $row1[4];?></td>
            </tr>
        </table>
        <?php endwhile;?>
    </body>
</html>

接下来我想做的是用我的数据填充更丰富的格式。

用于填充卡片的 HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Title</h2>
       <h2>Name</h2>
    </div>
    <div class="flip-box-back">
      <h4>Email</h4>
      <h4>Website</h4>
      <h4>Contact</h4>
    </div>
  </div>
</div>
<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Title</h2>
       <h2>Name</h2>
    </div>
    <div class="flip-box-back">
      <h4>Email</h4>
      <h4>Website</h4>
      <h4>Contact</h4>
    </div>
  </div>
</div>
<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Title</h2>
       <h2>Name</h2>
    </div>
    <div class="flip-box-back">
      <h4>Email</h4>
      <h4>Website</h4>
      <h4>Contact</h4>
    </div>
  </div>
</div>

</div>
</body>
</html>

【问题讨论】：

那是什么问题？
不起作用
以什么方式？不显示？
$row1[0] 的值是多少？
您的文件保存为 .html 还是 .php？（用于填充卡片的 HTML 文件）

标签： php html mysql

【解决方案1】：

我并没有真正得到你想做的事，但我认为这应该可行：

<?php while($row1 = mysqli_fetch_array($result1)):;?>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2><?php echo $row1[0];?></h2>
<h2><?php echo $row1[1];?></h2>
</div>
<div class="flip-box-back">
<h4><?php echo $row1[2];?></h4>
<h4><?php echo $row1[3];?></h4>
<h4><?php echo $row1[4];?></h4>
</div>
</div>
</div>
<?php endwhile;?>

【讨论】：

【解决方案2】：

我会有一个更复杂的答案。

您的表中有text 字段，我的建议是转向varchar(n)。您可以在这里了解差异 - Difference between VARCHAR and TEXT in mysql。 text 字段的最大问题之一 - 它不能成为索引的一部分，尽管您可以使用全文搜索功能。
尽量不要坚持使用SELECT * FROM ...，出于性能和安全原因，最好只从数据库中选择必要的数据。
将大量的html和php代码合并到一个文件中终究会下地狱。让我们将 Web 应用程序的各个部分分成不同的部分：HTML 和 CSS 将是静态模板，JS 将用于页面操作并使您的页面动态化（通过对服务器的请求，添加动画等），PHP 将用于 DB 请求.这种分离将封装您的代码，使其易于理解/开发/维护

因此，我将给出以下代码：

PHP (server.php)

$hostname = "localhost";
$username = "***";
$password = "***";
$databaseName = "***";

// connect to mysql
$connect = mysqli_connect($hostname, $username, $password, $databaseName);

$query = "SELECT title, name, email, website, contact FROM dtab1";
// result 
$result = mysqli_query($connect, $query);

while($row = mysqli_fetch_array($result))
{
  $dataRow[] = $row;
}

echo json_encode($dataRow);

HTML

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="my_script.js"></script>
</head>
<body>
<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2 id='title'></h2>
      <h2 id='name'></h2>
    </div>
    <div class="flip-box-back">
      <h4 id='email'></h4>
      <h4 id='website'></h4>
      <h4 id='contact'></h4>
    </div>
  </div>
</div>
</body>
</html>

JS (my_script.js)

$(document).ready(function() {
     $.post("server.php", {
        // you can add any POST request
     }, function(server_data) {
        data = JSON.parse(server_data);

        $("#title").html(data[0]['title']);
        $("#name").html(data[0]['name']);
        $("#email").html(data[0]['email']);
        $("#website").html(data[0]['website']);
        $("#contact").html(data[0]['contact']);
     });    
});

它是如何工作的 - HTML 只是简单的模板，您可以轻松应用任何 CSS 样式并查看它的外观。 JS 使用流行的 JQuery 向您的服务器（即本地主机）发出 POST 请求并填充返回的数据。 PHP 本身只发出必要的 DB 请求并输出数据。所有这些部件都可以很容易地单独修改和测试。

希望对你有帮助

【讨论】：