javascript - mysql 检索数据，为每个数据附加一个新行

Question

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

在我的主页上，我预设了 10 个 div 来保存从查询返回的数据。我预设了它，因为我只需要检索 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 个数据并将其放入我的 10 div

查询

/* 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";
}
?>

Answer 1

解决方案是不要在您的 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 标记的数据，因为它会增加传输的数据量。