最受欢迎

MySQL检索数据，为每个数据附加一个新行

mysql retrieve data, for each data append a new row

本文关键字：数据 一个 新行 MySQL 检索 | 更新日期: 2023-09-27

我正在为我的学校做一个项目，我必须从数据库中检索学生的作品。

在我的主页上，我预设了 10div 来保存从查询返回的数据。我预设它，因为我只需要检索 10 个数据。

.HTML

<div class="viewport-computer col-lg-12 visible-lg no-padding ">
    <div class="col-lg-2 img_thumb_holder no-padding">
        <img class="img_thumb">
        <h2 class="caption">Author<br />Description</h2>
    </div>
    <div class="col-lg-2 img_thumb_holder no-padding">
        <img class="img_thumb">
        <h2 class="caption">Author<br />Description</h2>
    </div>
    <div class="col-lg-2 img_thumb_holder no-padding">
        <img class="img_thumb">
        <h2 class="caption">Author<br />Description</h2>
    </div>
    <div class="col-lg-2 img_thumb_holder no-padding">
        <img class="img_thumb">
        <h2 class="caption">Author<br />Description</h2>
    </div>
    <div class="col-lg-2 img_thumb_holder no-padding">
        <img class="img_thumb">
        <h2 class="caption">Author<br />Description</h2>
    </div>
    <div class="col-lg-2 img_thumb_holder no-padding">
        <img class="img_thumb">
        <h2 class="caption">Author<br />Description</h2>
    </div>
    <div class="col-lg-2 img_thumb_holder no-padding">
        <img class="img_thumb">
        <h2 class="caption">Author<br />Description</h2>
    </div>
    <div class="col-lg-2 img_thumb_holder no-padding">
        <img class="img_thumb">
        <h2 class="caption">Author<br />Description</h2>
    </div>
    <div class="col-lg-2 img_thumb_holder no-padding">
        <img class="img_thumb">
        <h2 class="caption">Author<br />Description</h2>
    </div>
</div>

然后我使用 jquery 查询我的 php 以获取 10 个数据并放置在我的 10div 上

Jquery

/* Home Page Autoload featured thumbnails based on computer viewport/mobile viewport
    ================================================== */       
    $.ajax({
            type: "POST",
            dataType: "json",
            url: "CMS/PHP/displayFeatThumbs.php",
            success: function(data) {
                // Display image thumbnail, caption & description of works onto each thumbnail div
                $('.viewport-computer .img_thumb_holder img').each(function(index, element) {
                    // Work out the data to set
                    var imageUrl = "cms/" + data[index].links;
                    var captionHtml = "<span>" + data[index].caption + "<span class='spacer'></span><br/><span class='spacer'></span>" + data[index].title + "</span>"
                    // Now apply this to the elements
                    $(element).attr("src", imageUrl); // i must find a way to solve this
                    $(element).parent().css('background-image', 'url("'+imageUrl+'")');
                    $(element).next().html(captionHtml);
                    // push the caption & id into global variable array to be used on other functions easily
                    captionArray.push(data[index].caption);
                    idArray.push(data[index].id);
                    homeLinksArray.push(data[index].links);
                    homeTitleArray.push(data[index].title);
                });
        });

它工作正常，因为我循环遍历我的预设div（其中 10 个），然后将数据放入每个div。现在我需要做一个搜索栏功能，它会给我所有的结果（超过 50 个），我必须显示所有结果，现在问题是我只预设了 10divs，所以我的工作流程不适合这个

所以而不是我目前的

loop through 10 div > retrieve data and place on 10 div

我想

retrieve all data, for each data, append a new div and place it
我对

PHP不是很好，因为我仍然是一个新学习者，所以我被困在这个问题上，尽管我对如何做到这一点有想法。有人可以启发我如何循环访问每个数据并附加而不是我预设的div 吗？

.PHP

<?php
include 'dbAuthen.php';
$searchBar = $_POST['searchBar']; 
$sql = "SELECT userdatafiles.UserID,Name,Link,Title FROM userdatafiles JOIN users ON userdatafiles.UserID = users.UserID WHERE Skillsets = '$searchBar' GROUP BY UserID ORDER BY RAND()";
$result = mysqli_query($con,$sql);  
if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        echo '<div>hi</div>',
        $links[] = array(
            "id" => $row["UserID"],
            "links" => $row["Link"],
            "caption" => $row["Name"],
            "title" => $row["Title"],
        );                  
    }
    //shuffle($links);
    echo json_encode($links);   
} else {
    echo "0 results";
}
?>

解决方案不是在UI中预设50个div或10个div。

只需当您检索结果时，就会遍历所有记录，同时而不是填充您的div，而是动态创建div 并向其中插入数据。当新创建的div 准备就绪时，将它们附加到您的 UI 中，其中包含一些类（如"新数据"或其他内容），以显示这些记录在您的 UI 中有些新。

假设数据代表 PHP 返回的 json，并且数据是这里所有记录的集合，这是一种方法。

for(i=0; i<data.length; i++)
{
    $('<div class="col-lg-2 img_thumb_holder no-padding new-class">'
        +'<img src="'+data[i].imgSrc+'" class="img_thumb">'
        +'<h2 class="caption">'+data[i].author+'<br />'+data[i].description+'</h2>'
        +'</div>').appendTo("ul#yourRecordHolderElemenet").slideDown("fast");
}

确切的解决方案可能取决于您的 PHP 返回的 json，直到您显示确切的 json 响应，我们将无法正确帮助您。

我不建议返回从 PHP 返回带有 html 标记的数据，因为这会增加传输的数据量。

由于数据库中已经有信息，因此请直接在HTML中添加它们，而不是发出ajax请求。

<div class="viewport-computer col-lg-12 visible-lg no-padding ">
<?php
//You can get 10 records from database using 'limit 10' added to select query. 
//Get data from database. I assume you have the data in a variable $datafromdb
foreach($datafromdb as $data){
?>
    <div class="col-lg-2 img_thumb_holder no-padding">
        <img class="img_thumb">
        <h2 class="caption"><?=$data['author']?><br /><?=$data['description']?></h2>
    </div>
<?php } ?>
</div>

无需为您编写完整的代码，这里将

逐步介绍如何执行此操作
  1. 创建具有mysqli或pdo的数据库连接
  2. 使用select查询选择所有记录
  3. 对结果集执行foreach
  4. 在 foreach 中添加一个div
  5. PHP 将为select查询中的每一行添加一个div

例如：

 foreach($result->fetch_array() as $row) {
     ?>
     <div class="col-lg-2 img_thumb_holder no-padding">
        <img class="img_thumb">
        <h2 class="caption"><?= $row['author'] ?><br /><?= $row['description'] ?></h2>
     </div>
     <?php
 }

PHP 代码应该是：

<?php
include 'dbAuthen.php';
$searchBar = $_POST['searchBar']; 
$sql = "SELECT userdatafiles.UserID,Name,Link,Title FROM userdatafiles JOIN users ON userdatafiles.UserID = users.UserID WHERE Skillsets = '$searchBar' GROUP BY UserID ORDER BY RAND()";
$result = mysqli_query($con,$sql);  
if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        echo '<div>hi</div>',
        $links = array(
            "id" => $row["UserID"],
            "links" => $row["Link"],
            "caption" => $row["Name"],
            "title" => $row["Title"],
        );                  
    }
    //shuffle($links);
    echo json_encode(array('contents' => $links));   
} else {
    echo "0 results";
}
?>

请注意单维数组$link和关联数组json_encode 。

在jQuery中，你的success:可以是：

success: function(data){
  $.each(data.contents, function(ind, ele){
    // ele.id is the id and etc... or ind.id. :D
  });
}
相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习