将数据从sql加载到html中的列表答案

【问题标题】：Load data from sql to a list in html将数据从sql加载到html中的列表
【发布时间】：2016-07-21 20:53:27
【问题描述】：

我在html 中有一个列表，定义如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<?php include "connect.php"; ?>
<div id="view"> 
        <div id="container">
            <ul>
                <!-- row 01 -->
                <a href="#"><li class="clearfix">
                        <img src="images/modern-castle-kitchen.png" alt="thumb" class="thumbnail">
                        <h2>Full-Room Mansion with Open Kitchen</h2>
                        <p class="desc">Rental located in Pheonix, AZ. 2 bedrooms 1.5 baths. </p>                       
                        <span class="price">S2,650/month</span>
                </li></a>

            </ul>
        </div>
 </div>      

</body>
</html>

另一个 connect.php 文件，用于配置与我的数据库的连接

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "room_seeker";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT image, detail, money FROM room";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        echo "image: " . $row["image"]. " - detail: " . $row["detail"]. " "  . "money:". $row["money"]. "<br>";
    }
} else {
    echo "0 results";
}

mysqli_close($conn);
?>

在我上面的 html 文件中，我只是定义了一个固定的数据。如何编写代码以从我的数据库 (room_seeker.sql) 中获取数据并插入到我上面的 html 文件中的列表中。谢谢你的帮助

更新：根据建议，我将我的 html 文件更新为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<?php include "connect.php"; ?>
<div id="view"> 
        <div id="container">
            <ul>
                <!-- Assume sql has five rooms, so each room will be displayed in one list -->
                <a href="#"><li class="clearfix">
                        <img src="images/modern-castle-kitchen.png" alt="thumb" class="thumbnail">
                        <h2><?php echo $row['image']?></h2>
                        <p class="desc"><?php echo $row['detail']?></p>                     
                        <span class="price"><?php echo $row['money']?></span>
                </li></a>

            </ul>
        </div>
 </div>      

</body>
</html>

但输出错误（页面中没有任何内容）

【问题讨论】：

在$row 数据点周围回显HTML，使其格式符合预期。
你能说得更清楚一点吗？我假设我有 5 个来自数据库的房间。如何将它们全部列出到 html 中的 5 个列表中？我尝试了代码，但它不起作用
您能否更新问题，说明该代码的使用位置以及发生了什么？

标签： php html mysql css

【解决方案1】：

试试这个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<?php include "connect.php"; ?>
<?php 
    $sql = "SELECT image, detail, money FROM room";
    $result = mysqli_query($conn, $sql);
?>

<div id="view"> 
        <div id="container">
            <ul>
            <?php
                if (mysqli_num_rows($result) > 0) {
                    while($row = mysqli_fetch_assoc($result)) {
            ?>
                <!-- row 01 -->
                <a href="#"><li class="clearfix">
                        <img src="images/modern-castle-kitchen.png" alt="thumb" class="thumbnail">
                        <h2>Full-Room Mansion with Open Kitchen</h2>
                        <p class="desc">Rental located in Pheonix, AZ. 2 bedrooms 1.5 baths. </p>                       
                        <span class="price">S2,650/month</span>
                </li></a>

                <a href="#"><li class="clearfix">
                        <img src="<?php echo $row["image"]; ?>" alt="thumb" class="thumbnail">
                        <h2>Full-Room Mansion with Open Kitchen</h2>
                        <p class="desc"><?php echo $row["detail"]; ?></p>                       
                        <span class="price"><?php echo $row["money"]; ?></span>
                </li></a>
            <?php } 
            } ?>
            </ul>
        </div>
 </div>      

</body>
</html>

我修改了connect.php，使它看起来像这样

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "room_seeker";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

?>

【讨论】：

别忘了把你的html文件类型改成.php
在哪里关闭sql连接？
.....
在
on div id='view' 之后关闭它

【解决方案2】：

尝试像这样将你的 html 包装在 while 循环中

注意：根据需要设置你的html css和标签类

   $sql = "SELECT image, detail, money FROM room";
   $result = mysqli_query($conn, $sql);

   if (mysqli_num_rows($result) > 0) { ?>

      <ul>
          <?php  while($row = mysqli_fetch_assoc($result)) 
           { ?>

             <!-- row 01 -->
             <a href="#"><li class="clearfix">
             <img src="<?php echo $row["image"];?>" alt="thumb" class="thumbnail">
             <h2><?php echo $row["detail"];?></h2>
             <p class="desc"><?php echo $row["detail"];?></p>                       
             <span class="price"><?php echo $row["money"];?></span> </li>
             </a>

      <? }?>
 </ul>
  <?php
  } else 
    {
      echo "0 results";
  }

【讨论】：

【解决方案3】：

你只需要将你的 sql 语句的输出放在一个数组中。稍后使用 javascript 你可以得到这个数组并将它嵌入到你的表中。

PHP：

while($row = mysqli_fetch_assoc($result)) {
    $rows[] = $row;
}

Javascript：

var list = <?php echo json_encode($rows);?> 
for (var row in list){...}

【讨论】：