使用AJAX每秒显示一个新的DIV foreach数组

Question

I'm trying to create a new div every second with a prefilled data from the array list.

fields.php:

<?php

$file = fopen('names.csv', 'r');
while (($line = fgetcsv($file)) !== FALSE) {
  //$line is an array of the csv elements
    $names = $line;
    echo $names[array_rand($names)];
}
fclose($file);

?>

JS:

<script>
function createName(){
    var feedback = $.ajax({
        type: "POST",
        url: "fields.php",
        async: false
    }).complete(function(){
        setTimeout(function(){get_fb_complete();}, 1000);
    }).responseText;

    $('.content').html(feedback);
}

$(function(){
    createName();
});
</script>

And the Div I want to be created with the data from the arrays:

    <div class="content">

    <div class="col-1">

    <div class="profile-bg">
    <div class="inside-profile">
    <img src="img/avatars/avatar1.jpg" class="img-circle" border="0"></img>
    </div>
    </div>

    </div>

    <div class="col-2">
        <div class="details">
    <p style="font-size: 18px;"> ==*I want to show an ARRAY here.== </p>
    <p class="details-desc"> ==*(TIMESTAMP, something like: 1m to show when this div was created)== </p>
    </div>
    </div>

    <div class="col-3">
    <img src="img/userImg/userImg1.jpg" class="viewed-img" border="0"></img>
    </div>
</div>
<div class="col-4">
<div class="seperator"></div>
</div>

</div>

How to transform each ARRAY created in fields.php into a .content DIV?

Answer 1

First you have to print the value in a JSON format from the php side

<?php

$file = fopen('names.csv', 'r');
$data = [];
while (($line = fgetcsv($file)) !== FALSE) {
  //$line is an array of the csv elements
    $names = $line;
    $data[] = $names[array_rand($names)];
}
fclose($file);
echo json_encode($data);

?>

assuming values was a,b,c it will print ["a","b","c"]

at the js we will parse this values and iterate over it

<script>
function createName(){
    var feedback = $.ajax({
        type: "POST",
        url: "fields.php",
        async: false,
        success: function(data)
        {
            // parse json 
            data = JSON.parse(data);
            // add them in divs
            for ( var i = 0 ; i < data.length ; i++ )
            {
                // create the required format - you can do the same with createElement and assign class also
                var item_code = "<div class='content'>"+data[i]+"</div>";
                $("#container_p").append(item_code);
            }
        }
    }).complete(function(){
        setTimeout(function(){get_fb_complete();}, 1000);
    }).responseText;

    $('.content').html(feedback);
}

$(function(){
    createName();
});
</script>

Last thing is the HTML part just add id for the container p

    <div class="content">

    <div class="col-1">

    <div class="profile-bg">
    <div class="inside-profile">
    <img src="img/avatars/avatar1.jpg" class="img-circle" border="0"></img>
    </div>
    </div>

    </div>

    <div class="col-2">
        <div class="details">
    <p style="font-size: 18px;" id="container_p"></p>
    <p class="details-desc"> ==*(TIMESTAMP, something like: 1m to show when this div was created)== </p>
    </div>
    </div>

    <div class="col-3">
    <img src="img/userImg/userImg1.jpg" class="viewed-img" border="0"></img>
    </div>
</div>
<div class="col-4">
<div class="seperator"></div>
</div>

</div>