使用 MySQL 数据填充 div，将行与编号 ID 匹配

Posted 2023-02-24

技术标签:

【中文标题】使用 MySQL 数据填充 div，将行与编号 ID 匹配【英文标题】：Populating divs with MySQL data, matching row to a numbered ID 【发布时间】：2021-08-10 07:12:15 【问题描述】：

我正在尝试使用书籍数据库在页面上显示相关数据，方法是将可点击 div 的 id 与数据库中每本书的序列号进行匹配。我的桌子是这样的：

+-------------------+----------------+------------------+------------------+
| booknumber (INT)  | title (VCHAR)  | author (VCHAR)   | publisher (VCHAR)|
+-------------------+----------------+------------------+------------------+
| 123               | title of book  | name             | publisher name   |
| 124               | title of book  | name             | publisher name   |
| 125               | title of book  | name             | publisher name   |
| 127               | title of book  | name             | publisher name   |
| 128               | title of book  | name             | publisher name   |
| 130               | title of book  | name             | publisher name   |
 --------------------------------------------------------------------------

感谢this thread 中的回答，我能够获得要显示的数据。

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="book_db.js"></script>
    </head>
    <body>  
      
      <div class="index-wrapper">
        <div class="book" id="123">Book title</div>
        <div class="book" id="124">Book title</div>
        <div class="book" id="125">Book title</div>
        <div class="book" id="127">Book title</div>
        <div class="book" id="128">Book title</div>
        <div class="book" id="130">Book title</div>
      </div>

    <div class="book-info">
          <h2 id='title'></h2>
          <span id='booknumber'></span>
          <span id='author'></span>
          <span id='pubhisher'></span>
      </div>
    
    </body>
    </html>

php

<?php
$hostname = "localhost";
$username = "***";
$password = "***";
$databaseName = "book_db";


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

$query = "SELECT booknumber, title, author, publisher FROM booknumber";

$result = mysqli_query($connect, $query);

while($row = mysqli_fetch_array($result))

  $dataRow[] = $row;


echo json_encode($dataRow);
?>

和jquery

$(document).ready(function() 
    $.post("book_db.php", 
       
    , function(server_data) 
       data = JSON.parse(server_data);
       $(document).on('click', '.book', function()
       var number = $(this).attr('id');
   
        $("#title").html(data[number]['title']);
        $("#booknumber").html(data[number]['booknumber']);
        $("#author").html(data[number]['author']);
        $("#publisher").html(data[number]['publisher']);
   
        );    
    );
);

这对于前 125 本书左右非常有效，但随后有一个部分，实际书籍上的数字会跳过一个数字，因为这些书籍没有被使用。那时我意识到这段代码是从行号而不是我的 INT 数据（书的实际编号）中提取的。

所以我想要完成的是用数据库中与书号（INT）对应的行的数据（而不是行号）填充 info div 内的文本。如果这对解决方案有任何影响，我将 booknumber 列设置为主键。

【问题讨论】：

嗨，你能显示server_data 的输出吗？只需执行console.log(data)，您就会在浏览器控制台中看到结果。使用你提到的console.log(data)给了我一个无穷无尽的[object, Object]字符串，但是console.log(server_data)显示了整个数据库的输出。 【参考方案1】：

在实际上需要一本书数据来显示的地方获取完整的表格数据，实际上是在浪费服务器资源。在点击甚至触发后发出您的帖子请求。将“数字”数据传输到服务器，从表中获取对应的行数据，然后显示。

$(document).ready(function() 
  $(document).on('click', '.book', function()
     var number = $(this).attr('id');
     
     $.post("book_db.php", result: number, function(server_data) 
       data = JSON.parse(server_data);
   
        $("#title").html(data[number]['title']);
        $("#booknumber").html(data[number]['booknumber']);
        $("#author").html(data[number]['author']);
        $("#publisher").html(data[number]['publisher']);
   
        );    
    );
);

你必须根据这个重写你的服务器代码。另外，尝试动态创建这些 html 元素

<div class="index-wrapper">
        <div class="book" id="123">Book title</div>
        <div class="book" id="124">Book title</div>
        <div class="book" id="125">Book title</div>
        <div class="book" id="127">Book title</div>
        <div class="book" id="128">Book title</div>
        <div class="book" id="130">Book title</div>
      </div>

PHP

?php
$hostname = "localhost";
$username = "***";
$password = "***";
$databaseName = "book_db";


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

$dataRow = array();
if(isset($_POST['result'])) 
$post = $_POST['result'];
$sql = "SELECT * FROM booknumber WHERE booknumber=".$post;
$result = $connect->query($sql);


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

  $dataRow[] = $row;

   

echo json_encode($dataRow);
?>

【讨论】：

谢谢！我觉得这很简单，但我在网上找到的大部分内容都很复杂。这也有助于我理解如何更好地从数据库中获取数据。我在本地服务器上的方式很好，但我可以看到在在线情况下拉整个数据库不会那么好。我们有超过 5500 本书要放入这个数据库！另外，您提到了重写服务器代码。那是我可以获取书的编号而不是行本身的编号吗？您好，您已将所需的书号转移到服务器。使用 WHERE 子句从数据库中收集图书信息。 SELECT * FROM your_table_name WHERE booknumber = $_POST['result']; 现在我的 php 中出现以下错误：警告：第 10 行 C:\xampp\htdocs\test\book_db.php 中未定义的数组键“结果”致命错误：未捕获的错误：在 C:\xampp\htdocs\test\book_db.php:15 中的 bool 上调用成员函数 fetch_assoc() 堆栈跟踪：#0 main 在第 15 行的 C:\xampp\htdocs\test\book_db.php 中抛出我对 PHP 文件做了一些更改。立即尝试

以上是关于使用 MySQL 数据填充 div，将行与编号 ID 匹配的主要内容，如果未能解决你的问题，请参考以下文章

SQL：将行与列中的逗号分隔值合并

Bootstrap 4将行与容器底部对齐

使用Python Dataframe将行与下一行进行比较并从结果中创建一个新列？

将行与标题进行比较，然后在列中插入值并在 VBA 中进行重复检查

根据第一列中的字母数将行与上一行连接起来

将行反透视成列