mysql检索数据，为每个数据追加一个新行

时间：2015-02-02 08:09:45

标签： javascript php jquery html mysql

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

在我的主页上，我预设了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

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

4 个答案:

答案 0 :(得分：0)

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

当您通过所有记录同时检索结果循环而不是填充div时，您可以动态创建div并向其中插入数据。当新创建的div准备就绪时，可以使用某些类（例如“new-data”）将它们附加到您的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标记返回数据，因为它会增加传输的数据量。

答案 1 :(得分：0)

如果没有为您编写完整的代码，这里将逐步介绍如何执行此操作

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

    例如：

     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
 }

答案 2 :(得分：0)

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
  });
}

答案 3 :(得分：0)

由于您已经拥有数据库中的信息，因此直接在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>
相关问题
最新问题